如何修复CORS策略错误以完成系统搭建？

手把手教你修复CORS策略错误，让跨域请求不再“卡壳”

嘿，各位前端小伙伴们，是不是经常在开发过程中遇到那个让人头疼的CORS策略错误？明明代码写得挺顺，浏览器却突然给你来个“Access-Control-Allow-Origin”的警告，搞得你一头雾水，别急，今天咱们就来聊聊这个CORS策略错误，看看它到底是个啥，以及怎么把它给“驯服”了。

CORS策略错误，到底是个啥？

CORS，全称是Cross-Origin Resource Sharing，也就是跨域资源共享，就是浏览器为了安全起见，限制了从一个域名的网页去请求另一个域名的资源，你在www.example.com上写了个网页，想通过AJAX去请求api.anotherdomain.com的数据，这时候浏览器就可能跳出来说：“不行，这不符合我的安全策略！”然后你就看到了那个熟悉的CORS策略错误。

为什么会出现CORS策略错误？

出现这个错误，主要是因为浏览器的同源策略，同源策略要求，只有协议、域名、端口都相同的网页，才能互相访问资源，一旦跨域，就需要服务器明确允许，这就是CORS的用武之地，如果服务器没有正确配置CORS头，或者配置得不符合你的请求需求，浏览器就会拒绝你的请求,抛出CORS策略错误。

修复CORS策略错误，几步搞定！

好了，说了这么多，咱们来点实际的，怎么修复这个CORS策略错误呢？别急,我这就给你支几招。

服务器端配置CORS头

最直接的办法，就是让服务器端来配置CORS头，这通常涉及到修改服务器的配置文件，比如Apache的.htaccess，或者Nginx的配置文件，你需要添加一些HTTP头,告诉浏览器这个资源是可以跨域访问的。

举个例子，如果你用的是Nginx,可以在配置文件里加上这么一段：

location / {
    add_header 'Access-Control-Allow-Origin' ' ';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

这段代码的意思是，允许所有来源的请求（），允许GET、POST和OPTIONS方法，以及一些常见的HTTP头，根据你的实际需求,你可能需要调整这些配置。

使用代理服务器

如果你不能直接修改服务器端的配置，或者服务器端不是你能控制的，那么使用代理服务器也是个不错的选择，代理服务器可以作为一个中间人，帮你转发请求,并且添加必要的CORS头。

你可以用Node.js搭建一个简单的代理服务器，使用http-proxy-middleware这个中间件，这样，你的前端代码就可以向代理服务器发送请求，代理服务器再帮你转发到目标服务器,同时添加CORS头。

开发时使用浏览器插件

如果你只是在开发阶段遇到了CORS策略错误，不想大动干戈地修改服务器配置，那么使用浏览器插件也是个临时解决方案，Chrome浏览器上有个“CORS Unblock”插件，可以临时绕过浏览器的CORS限制，但记住，这只是开发时的权宜之计,生产环境可不能这么干！

JSONP（仅限GET请求）

对于GET请求，还有一种古老但有效的方法，那就是JSONP，JSONP通过动态创建<script>标签来加载数据，因为<script>标签的src属性是不受同源策略限制的，但JSONP有个明显的缺点，就是它只支持GET请求,不支持POST等其他HTTP方法。

修复后的注意事项

修复了CORS策略错误之后，也别忘了注意一些事项，确保你的CORS配置是安全的，不要随意允许所有来源的请求，特别是生产环境，定期检查你的服务器配置，确保没有因为更新或升级而丢失了CORS头，记得在开发环境和生产环境使用不同的配置，开发环境可以宽松一些,但生产环境一定要严格。

好了，说了这么多，相信你对CORS策略错误已经有了个全面的了解，也知道怎么去修复它了，CORS策略虽然有时候会给我们带来点麻烦，但它也是浏览器为了保护我们免受跨站脚本攻击等安全威胁而设置的一道防线，在修复CORS策略错误的同时，也要时刻保持对安全的警惕，下次再遇到CORS策略错误，别慌，按照上面的步骤一步步来,相信你一定能轻松搞定！