使用 XMLHttpRequest 在 Chrome 浏览器中检查远程服务器上存在的图像时遇到问题答案

【问题标题】：Trouble on checking of image existing on remote server in Chrome browser by using XMLHttpRequest使用 XMLHttpRequest 在 Chrome 浏览器中检查远程服务器上存在的图像时遇到问题
【发布时间】：2019-08-17 23:41:32
【问题描述】：

我在页面上使用这个 JQuery 方法来检查图像是否存在：

function imageExists(imageUrl) {
  var http = new XMLHttpRequest();
  http.open('HEAD', imageUrl, false);
  http.send();
  return http.status !== 404;
}

如果我在浏览器中加载页面，效果很好，但如果我转到下一页然后返回此页面，则脚本无法正常工作。浏览器控制台报错：

从源“http://client”访问“https://server/image.jpg”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

仅当我在 Chrome 浏览器中从另一个站点页面返回此页面时才会出现此错误。 Firefox和Edge浏览器没有错误

谢谢！！！

【问题讨论】：

无论哪种情况都应该存在该错误，CORS不取决于您是否在自己的页面之间来回导航，而仅取决于远程主机是否允许这种请求。
我知道并且在带有图像的服务器上启用了 CORS。也许 CORS 策略在远程服务器上设置不正确。但是为什么它在加载页面时没有错误？
然后响应应该在网络面板中显示适当的标题；是吗？

标签： javascript jquery cors xmlhttprequest

【解决方案1】：

此问题已通过添加带有“no-cache”值的“Cache-Control”请求标头得到解决：

function imageExists(imageUrl) {
    var http = new XMLHttpRequest();

    http.open('HEAD', imageUrl, false);
    http.setRequestHeader('Cache-Control', 'no-cache');
    http.send();

    return http.status !== 404;
}

【讨论】：