Question

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

实际上我使用简单的jquery方法来显示我的图像。

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

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

那么..检查是否存在身份验证以及是否将其显示给用户的最佳方式是什么？

Answer 1

您可以发出仅返回标头的HEAD请求，然后在实际发出请求之前检查身份验证标头的标头：

HEAD方法与GET相同，只是服务器不能在响应中返回消息体。响应HEAD请求的HTTP头中包含的元信息应该与响应GET请求时发送的信息相同。此方法可用于获取有关请求所隐含的实体的元信息，而无需转移实体主体本身。

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

您可以使用此方法首先检查标题，然后如果确定，则获取图像。您必须使用受保护的资源对其进行测试，我不确定在请求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/

回顾它是怎么回事！

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

1 个答案: