如果你在进行前后端分离的开发时发现在测试环境内没有任何问题，而一上生产环境就会出现前端根本无法向后端发出请求的问题，那么恭喜你，你成为了万恶的CORS的受害者之一！！！
你可以按F12打开开发者工具，选择网络选项卡，按F5刷新网页。不出意外的话你会看见一长串的CORS Error。同时，控制台也会输出错误。
什么是 CORS
跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。
跨源HTTP请求的一个例子：运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求。
出于安全性，浏览器限制脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。
@>
@> 来源: 跨源资源共享（CORS） - HTTP | MDN
跨源HTTP请求的一个例子：运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求。
出于安全性，浏览器限制脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。
@>
@> 来源: 跨源资源共享（CORS） - HTTP | MDN
如何修复
如果你使用了支持修改返回头的CDN，你可以直接在CDN侧配置。
在CDN侧添加如下四个返回头：
| 标头名称 | 值 |
|---|---|
| Access-Control-Allow-Methods | GET,POST,HEAD,OPTIONS |
| Access-Control-Allow-Origin | * |
| Cross-Origin-Opener-Policy | cross-origin |
| Cross-Origin-Resource-Policy | cross-origin |
如果你没有使用CDN，那么直接在Nginx配置文件中写规则即可。
1 条评论
如果是正式项目的话，Access-Control-Allow-Origin 应该仅允许自己的前端