使用 JS 检测特定错误 (403)

Question

我试图在我的页面上捕获一个潜在的错误，该页面有一组 URL（在页面加载时检索）到需要时加载的各种资源。

但是这些资源只能在设定的时间内使用，因此如果用户长时间闲置页面，这些 URL 可能不再有效并可能返回 403。

我目前正在使用以下方式检测资源上的错误：

$(".identifier").on("error", function () {
    console.log("Error on resource load");
});

但是我可以检测特定类型的错误/错误代码吗？例如403 权限错误，而不是通用的“有错误”。如果可能的话，我希望能够对不同的错误做出不同的反应。

Answer 1

假设您在数组中拥有所有可用资源的 URL，例如

var resources = [
    "http://url/to/resource-one.fiel",
    "http://url/to/resource-two.fiel"
    ]

然后您可以使用以下函数来检查这些资源的 http 响应，方法是遍历数组并将每个资源传递给 checkResources。

   function checkResource (url, index) {
      var req = new XMLHttpRequest();
      req.open('HEAD', url, true);
      req.send();
      if (req.status === 404) {
        return index;
      }
      if (req.status === 403) {
        return index;
      }
   };

或者使用不带循环的特定 URL 并删除函数中的索引参数， 可能会返回 URL。换句话说，做一个 ajax HEAD 请求，它只会返回 headers 资源，而不是资源本身。

您也可以像这样获取所有标题信息或仅按名称获取特定标题信息

 xmlhttp.open('HEAD', 'path/to/your/resource', true);
 xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4) {
      console.log(xmlhttp.getAllResponseHeaders()); // get all header info
      console.log(xmlhttp.getResponseHeader("Last-Modified")); // get by name
    }
 }
 xmlhttp.send(null)