Firefox CORS 阻止访问列出的允许站点答案

【问题标题】：Firefox CORS blocking access to site that is listed allowedFirefox CORS 阻止访问列出的允许站点
【发布时间】：2021-12-26 15:40:51
【问题描述】：

我正在尝试使用 json 占位符站点来获取 React 项目的虚拟数据。我使用 axios 包获取数据。我在 Firefox 中打开了我的应用程序，它在控制台中显示了这个错误：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://jsonplaceholder.typicode.com/users. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://localhost:3000’)。

然后，我检查了响应标头，它具有以下 CORS 标头：

根据我的理解，如果access-control-allow-credentials 是true 并且access-control-allow-origin 与我的来源（即http://localhost:3000）匹配，那么我应该能够访问响应数据，但 Firefox 阻止了它。

我不明白为什么 Firefox 会阻止响应数据，尽管 access-control-allow-origin 匹配源。我还在 Brave 浏览器中测试了这个应用程序，它运行良好。

我正在使用Firefox developer version 95.0b6 (64-bit)

【问题讨论】：

https://localhost:3000 和 http://localhost:3000 是不同的来源（因为它们的方案不同）。
是的。这是正确的，但在响应标题中有http://localhost:3000 所以它应该允许我正确。
但是，CORS 错误消息表明请求是由 https://localhost:3000 发出的。
我发现了实际问题。实际问题是由于https everywhere 扩展。它如何设法说服 Firefox 我正在使用 https 而我不是这样 CORS 阻止了响应。

标签： cors

【解决方案1】：

从外观上看，您正在对 http 进行 localhost 开发，并尝试通过 https 请求使用 cloudflare（除非我读错了）。今天所有现代浏览器都会阻止这一点，因为它们不允许跨协议请求（而且我认为它们也不再允许不安全的请求）。如果您将本地开发环境设置为在其自己的自签名安全证书下运行，那么您可以让您的 CORS 调用与本地开发一起使用。

【讨论】：

是的，这是由于跨协议请求，但它没有被浏览器阻止。实际上，这个错误是由https everywhere 扩展引起的。我认为https everywhere 扩展以某种方式设法让浏览器相信我正在使用https 协议，而无需将URL 中的http 更改为https。因为，我在 http 并且允许来源也在 http 浏览器阻止了该请求。