chrome 87：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-03

【中文标题】chrome 87：请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：chrome 87 : No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2021-04-09 21:28:20

【问题描述】：

当我使用chrome 78版本时，我可以正常将自定义header key-value传递给后端，但是当我将内核升级到最新的chrome版本87时，我再次访问后端java api接口时出错它说“请求的资源上不存在'Access-Control-Allow-Origin'标头。请求的资源上存在Origin'标头。” 我做错了什么？

vue : 2.6.11 axios: 0.19.2

【问题讨论】：

可能只是 Chrome 强制执行的一项安全措施，以引起对 CORS 可能缺陷的关注。

@fluffy chrome 85 中的这种 CORS 安全机制让我在开发过程中无法在本地编写 web 项目。我该怎么办？

【参考方案1】：

这是一个服务器端问题。您应该联系服务器管理员并要求他在响应中添加 Access-Control-Allow-Origin 标头，或者如果服务器在您手中，请自行执行。

【讨论】：

我已将前端传递的密钥添加到后端的“Access-Control-Allow-Headers”中。

经过我的不断测试。在chrome 84版本之前可以正常访问java api，当我将chrome升级到85或以上时，出现上述跨域错误！

第一次尝试请求Request Method: OPTIONS，可以请求成功，但是当第二次正常post请求后端出现跨域，并且请求头显示“Referrer Policy: strict-origin-when -跨域”

【参考方案2】：

我通过以下方式解决了 chrome 85+ 安全策略问题： 通过vue代理设置反向代理来欺骗浏览器。

【讨论】：

不需要欺骗浏览器。你用什么网络服务器？

@yooneskh 服务器端是 nginx 和 java。

可以很方便的在nginx中添加需要的header。我使用这个 sn-p 来允许我的服务器中的 cors。 add_header Access-Control-Allow-Origin * always; add_header Access-Control-Allow-Headers * always; add_header Access-Control-Allow-Methods * always;