CORS 仅在 Firefox 和 Safari 上且仅在 onClick() 上阻止内容

Posted 2023-03-04

【中文标题】CORS 仅在 Firefox 和 Safari 上且仅在 onClick() 上阻止内容

【英文标题】：CORS blocking content only on Firefox and Safari and only onClick()

【发布时间】：2020-03-25 09:55:56

【问题描述】：

我正在构建一个react.js 应用程序，我认为我遇到了 CORS 问题，但我无法创建服务器。因此，我使用了一个代理（比如这个https://cors-anywhere.herokuapp.com/$myApiEndpointHere）。

当我使用 Chrome 时，我能够成功获取数据。但是，当我使用 Firefox 或 Safari 时，我会遇到下面列出的这些问题。这个 CORS 问题（在 Firefox 和 Safari 上）似乎也仅在触发滚动时发生，因为对于 Firefox、Safari 和 Chrome，我都能够获取我的内容并登录到控制台。

火狐：

跨域请求被阻止：同源策略不允许读取 远程资源在 https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg。 （原因：CORS 标头中缺少令牌“用户代理” 来自 CORS 预检通道的“Access-Control-Allow-Headers”）。

跨域请求被阻止：同源策略不允许读取 远程资源在 https://res.cloudinary.com/dcpexd0zo/image/upload/v157136216…pes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg。 （原因：CORS 请求未成功）。

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

Safari：

请求头域 User-Agent 不允许 访问控制允许标头。

Fetch API 无法加载 https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg 由于访问控制检查。

https://res.cloudinary.com/dcpexd0zo/image/upload/v1571362166/shapes/Capture_d_e%CC%81cran_le_2019-10-17_a%CC%80_21.26.11.jpg 加载资源失败：请求头域 User-Agent 不是 Access-Control-Allow-Headers 允许。

错误：您提供的错误不包含堆栈跟踪。

未处理的承诺拒绝：TypeError：请求标头字段 Access-Control-Allow-Headers 不允许 User-Agent。

【参考方案1】：

您应该阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

并将此标头添加到来自代理服务器的响应中：Access-Control-Allow-Headers: *

【讨论】：

我可以从客户端执行此操作吗？使用这样的代理：cors-anywhere.herokuapp.com?