加载图像并在需要验证时移除

我从搜索机器中抓取一些（随机）图像并将它们显示给用户。问题是：可能发生某些图像需要http认证（用户名/密码）。我不想拥有这些图像......应该将它们删除，而不显示弹出窗口，您可以输入用户名和密码。加载图像并在需要验证时移除

其实我正在使用简单的jquery方法来显示我的图像。

var displayNode = .... 
.... 
var m_img = $("<img />", {src : "...."}); 
m_img.bind('error', function (e) { 
    $(this).remove(); 
}); 
displayNode.append(m_img);

现在我直接加载图像，如果发生错误，它将被删除。但是，当服务器发回HTTP（基本）身份验证标志时，这当然不是错误。因此有一个输入提示。当我点击“取消”propmt关闭，jquery将其视为错误并删除图像。

那么..什么是检查是否有认证，如果不显示给用户的最好方法是什么？

来源

2014-09-19 Ioannis K.

你可以做一个HEAD请求，仅返回头，后来竟提出请求之前检查认证头标题：

的HEAD方法相同，除了服务器不能返回到GET消息体在响应中。 HTTP头中包含的对HEAD请求作出响应的元信息应该与为响应GET请求而发送的信息相同。此方法可用于获取有关请求隐含的实体的元信息，而无需传递实体主体本身。

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

你可以使用这个方法首先检查头部，然后如果OK，获取图像。你必须用受保护的资源来测试它，我不确定浏览器在请求HEAD时会做什么，而且我没有本地受保护的资源来测试（CORS让我了解我的在线资源试图反对）。小提琴：

var basicAuthProtectedURL = 'http://fiddle.jshell.net'; 
var xhr = new XMLHttpRequest(); 
xhr.open("HEAD", basicAuthProtectedURL, true); 
xhr.onload = function (e) { 
    if (xhr.readyState === 4) { 
    if (xhr.status === 200) { 
     console.log(xhr.getAllResponseHeaders()); //all headers 
     console.log(xhr.getResponseHeader('Content-Type')); //just the one you want 
     if (xhr.getResponseHeader('WWW-Authenticate')) { 
      console.log('I got the authentication header, skip this request.'); 
     } else { 
      console.log('no header, resource unsecure'); 
     } 
    } else { 
     console.error(xhr.statusText); 
    } 
    } 
}; 
xhr.onerror = function (e) { 
    console.error(xhr.statusText); 
}; 
xhr.send(null);

http://jsfiddle.net/5z5bnwgz/

回来后如何去！

来源

2014-09-19 20:07:49 pherris

我试过使用HEAD，但也有一些问题。首先是跨域的问题（jQuery的跨域标志）。第二：如果服务器返回401响应，onload事件根本不会被触发。解决方案可能如下所示：如果触发了错误 - >删除图像。如果onload被触发并且readystate是4 - >图像可用并且可以加载。 – 2014-09-19 21:51:02

这对我来说似乎完全合理......只要它不触发用户名/密码提示。 – pherris 2014-09-20 01:58:23

加载图像并在需要验证时移除

回答

相关问题