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

Posted 2023-03-04

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

【英文标题】：Trouble on checking of image existing on remote server in Chrome browser by using XMLHttpRequest

【发布时间】：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 策略在远程服务器上设置不正确。但是为什么它在加载页面时没有错误？

然后响应应该在网络面板中显示适当的标题；是吗？

【参考方案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;