为啥我的简单提取会触发 CORS 错误？

Posted 2023-03-04

【中文标题】为啥我的简单提取会触发 CORS 错误？

【英文标题】：Why is my simple fetch triggering a CORS error?为什么我的简单提取会触发 CORS 错误？

【发布时间】：2021-08-15 02:46:17

【问题描述】：

我正在尝试对我无法控制的服务器执行simplefetch：

fetch('https://path.to.the.server/api/items');

这是一个 GET 端点。使用 Firefox 52.9.0，如果我将获取代码粘贴到控制台并按 Enter，我会在“网络”选项卡中看到 GET 请求失败并显示 401。在控制台中，我收到以下错误：

跨域请求被阻止：同源策略不允许读取位于https://path.to.the.server/api/items 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

TypeError：尝试获取资源时出现 NetworkError。

fetch 中没有任何应该触发 CORS 的内容。重要的是，我没有在 401 之前的“网络”选项卡中看到预检 OPTIONS 请求。401 失败是在 GET 请求本身上。但是，控制台中的错误仍然指向浏览器由于 CORS 而被拒绝。

所以我很困惑为什么 CORS 在这里是个问题。这应该是一个简单的获取。我有什么遗漏吗？

注意：该项目处于“离线”环境，这就是为什么我没有链接实际 URL 以进行社区测试。

【问题讨论】：

“这里没有任何东西应该触发 CORS” 任何对不允许 CORS 的来源的请求都会引发 CORS 错误。不管是 GET、POST 还是 DELETE。如果来源不被允许，浏览器将阻止响应到达您的脚本

GET 请求不发送预检请求。当响应没有正确的标题时，它只是拒绝它。

我应该澄清一下：我的意思是这个请求中没有任何内容应该触发 预检 OPTIONS 请求，这样我的浏览器就会确定它无法发出实际请求。

你应该阅读developer.mozilla.org/en-US/docs/Web/HTTP/CORS

@blex 回到我的具体问题，让我确保我理解。如果服务器的响应不包含“Access-Control-Allow-Origin”，您是说对不同来源的 any 请求（但在我的情况下，请求不需要预检选项）将失败' 标题？

【参考方案1】：

当这不是需要针对 CORS 进行验证的请求时，为什么我会收到与 CORS 相关的错误。

即使请求不需要预检 CORS 检查，它仍然会得到 CORS 检查。

例如，如果你在控制台中运行

var xhr = new XMLHttpRequest;
xhr.open("GET", "https://www.mozilla.org/en-US/");
xhr.send();

在网络选项卡中，您将能够单击“响应”并查看响应，但您将仍然得到

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.mozilla.org/en-US/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

没有预检的原因是因为 GET 请求不应该修改任何内容，而其他类型的请求会，因此浏览器首先会进行“安全”检查，然后甚至允许真正的请求到达服务器。

【讨论】：

谢谢。我认为预检 OPTIONS 请求是跨源阻止请求的先决条件。我不知道没有预检 OPTIONS 的标准 GET 请求可能会因为服务器的响应不包含 Access-Control-Allow-Origin 标头而被阻止。你能帮我解释一下为什么我的 fetch 请求在 Chrome 90 中有效，但在 FF 中无效？是不是因为这里的问题？ ***.com/a/15734032/209113

哦，哈哈，我不知道它在 Chrome 中有效。我会仔细检查 https 安全证书是否受信任（似乎无关，但相信我），如果这不起作用，请禁用您在 Firefox 中安装的任何插件（有时广告拦截器会导致此类问题）。否则我不知道