哎呀，我这个网站搞了好久，总是出这个问题，那个CORS错误，搞的我头dou大了。今天我就来跟大家好好说说这个到底是个啥玩意儿，还有怎么搞定它，挺好。。

什么是CORS错误？

CORS， 全称叫跨域资源共享，英文是Cross-Origin Resource Sharing。这个玩意儿吧，说白了就是浏览器搞的一个平安措施。你想啊，你在A网站，突然想偷偷摸摸去B网站拿点数据，这肯定不行啊，太凶险了。浏览器就站出来拦着说："不行不行，你不Neng乱跨域访问。"，太治愈了。

dan是呢，有时候我们确实需要跨域啊。比如现在的前后端分离，前端跑在一个服务器上，后端跑在另一个服务器上， 一言难尽。 这俩域名不一样，不就跨域了嘛。huo者你开发的时候，本地localhost去调远程的服务器，这也是跨域。

戳到痛处了。 suo以啊，CORS就是浏览器给的一个"通行证"机制。如guo你的请求是合法的， 服务器愿意让你跨域，那浏览器就放行；如guo服务器没给你这个"通行证"，浏览器就拦着，给你个CORS错误，告诉你："不行，这个你不Neng访问。"

CORS错误长啥样？

当你遇到CORS错误的时候，浏览器控制台会给你kan一些提示。Zui常见的提示就是"Access-Control-Allow-Origin"，还有"blocked by CORS policy"之类的。有时候还会报一些403错误，告诉你被拦截了，换句话说...。

这个错误吧，有时候hen烦人。明明后端接口是好的，Neng正常返回数据，浏览器就是不让显示。特bie是dui与新手一kan这个错误就懵了不知道咋回事。其实说白了就是浏览器觉得这个请求不平安，suo以拦着了。

CORS错误的几种情况

我遇到过的CORS错误大概有这么几种：

啥玩意儿？ 1、 简单请求错误：GET、POST这些简单请求，直接就被浏览器拦了控制台显示"blocked by CORS policy"。这个Zui常见，特bie是那些啥dou没配置的接口。

2、 预检请求错误：PUT、DELETEhuo者带自定义头的请求，浏览器会先发个OPTIONS请求问问服务器Neng不Neng这么干， 基本上... 服务器说不行，那就返回403错误。这个也经常遇到，特bie是ZuoRESTful API的时候。

最后说一句。 3、 凭证请求错误：如guo你的请求带了Cookie，那服务器必须得特bie允许，不然浏览器也拦着。这个有时候会让人hen头疼，明明dou配置了就是不行。

4、 自定义头错误：比如你前端带了tokenhuo者content-type:application/json这些头，服务器也得在响应头里明确说允许这些头，不然还是不行。

为啥会有CORS错误？

这个嘛，说起来也hen简单。浏览器出于平安考虑，默认不允许跨域请求。它怕有人搞恶意的跨域攻击，比如CSRF啥的。suo以啊，它搞了个同源策略，就是说协议、域名、端口这三个只要有一个不一样，就不让访问，不忍卒读。。

dan是呢，有时候我们又确实需要跨域啊。比如前后端分离开发，前端跑在8080端口，后端跑在3000端口，这俩就不一样。huo者你用Vue、 React这些框架，开发服务器跑在localhost，接口跑在另一个服务器上，这也跨域了。

suo以啊，CORS就是浏览器给的一个"开小灶"的机制。如guo你是好人，服务器愿意让你跨域，那就给你个"通行证"；如guo你是坏人，那对不起，不让过，换个赛道。。

怎么解决CORS错误？

我不敢苟同... 解决CORS错误的方法其实挺多的，dan是Zui核心的一点就是：后端为主，前端为辅。也就是说主要得靠后端服务器来配置，前端NengZuo的hen有限。

后端配置方法

后端配置CORS主要就是设置一些响应头，告诉浏览器："这个请求可yi跨域"。Zui重要的几个头是：

Access-Control-Allow-Origin：这个是告诉浏览器哪些域名可yi访问。可yi写具体的域名，也可yi写*表示suo有域名dou行。

Access-Control-Allow-Methods：这个是告诉浏览器允许哪些HTTP方法， 比如GET、POST、PUT、DELETE啥的。

Access-Control-Allow-Headers：这个是告诉浏览器允许哪些请求头， 比如Content-Type、Authorization啥的，换位思考...。

Access-Control-Allow-Credentials：这个是告诉浏览器是否允许凭证， 比如Cookie、Authorization头啥的。这个得跟Access-Control-Allow-Origin配合用，不Neng一边用*，我裂开了。。

Access-Control-Max-Age：这个是告诉浏览器预检请求的缓存时间，避免每次dou发OPTIONS请求，有啥说啥...。

具体的配置方法吧，不同的后端框架不一样。比如Java的Spring Boot， 可yi搞个配置类； 一言难尽。 Node.js的Express，可yi用cors中间件；PHP的话，可yi在header里设置。

前端代理方法

前端代理主要是在开发环境用的。比如用Vue CLIhuo者Create React App的时候， 可yi在配置文件里设置代理，让请求先发到开发服务器，再由开发服务器转发到后端。这样就不会触发CORS错误了，KTV你。。

dan是啊，这个方法只适合开发环境，生产环境不Neng用。主要原因是生产环境你不可Neng让前端服务器去转发请求， 划水。 那样太慢了也不平安。

常见的CORS配置误区

性价比超高。 在配置CORS的时候， 经常会犯一些错误，搞得人头疼。我来说说几个常见的：

我不敢苟同... 1、 以为前端Neng解决suo有CORS问题：其实前端NengZuo的hen有限，主要还得靠后端配置。特bie是生产环境，前端代理根本没用。

说起来... 2、 把Access-Control-Allow-Origin设为*还启用凭证请求：这两个是冲突的，不Neng一边用。要么指定具体域名，要么就不要凭证。

3、 忽略OPTIONS预检请求：有些请求会先发个OPTIONS问问行不行， 哎，对！ 后端得正确响应，不Neng直接返回404或500。

4、 忘记配置允许的自定义头：如guo前端请求带了token、content-type:application/json这些头， 我心态崩了。 后端得在Access-Control-Allow-Headers里添加，不然还是不行。

实战案例

我来说个实际的例子吧。有一次我Zuo个项目，前端用Vue跑在8080端口，后端用Node.js跑在3000端口。一开始啥dou没配置，后来啊一请求就CORS错误，呃...。

你想... ran后我就去查资料，发现得在后端配置CORS。我在Express里用了cors中间件， 设置了origin: 'http://localhost:8080'，这样前端就Neng访问了。

后来我加了登录功Neng，需要带Cookie，后来啊又不行了。查了半天发现， 还得设置credentials: true，bing且Access-Control-Allow-Origin不Neng写*，必须写具体的域名。

再后来 我加了文件上传，需要用POST，还要带Content-Type: multipart/form-data，后来啊又不行了。发现还得在Access-Control-Allow-Headers里加上这个头。

百感交集。 总之啊，CORS配置就是个不断试错的过程，有时候一个小细节没注意，就全功尽弃了。

一下

CORS错误这个东西吧，说简单也简单，说复杂也复杂。核心就是浏览器为了平安不让跨域访问，但有时候我们又确实需要跨域，suo以就得想办法让浏览器"开绿灯"，说句可能得罪人的话...。

解决方法主要就是后端配置响应头，告诉浏览器哪些请求可yi跨域。前端代理只适合开发环境用，生产环境不行。配置的时候要注意一些细节， 比如不Neng一边用*和credentials，要记得处理OPTIONS预检请求，要配置允许的自定义头等等，我满足了。。

其实吧，CORS这个东西虽然烦人，dan是也是为了平安考虑。如guo没有这个东西，那网站就太不平安了随便douNeng被跨域攻击。suo以啊，虽然配置起来麻烦，但这也是必要的，求锤得锤。。

总之啊，遇到CORS错误别慌，先kankan是哪种情况，ran后对症下药。如guo是简单请求， 配置下Access-Control-Allow-Origin就行； 摸鱼。 如guo是预检请求，得处理OPTIONS；如guo是带凭证的，还得配置credentials。一步一步来总Neng解决的。

啊，对了还有就是开发的时候用代理，生产环境一定要后端配置好。 我给跪了。 这个hen多人容易搞混，一定要记住。

好了guan与CORS错误就说到这里吧。希望对大家有帮助。如guo还有什么问题，欢迎评论区交流。反正我是被这个CORS搞了好久，总算是搞明白了。唉，Zuo开发真是不容易啊，天天跟这些错误斗智斗勇，这就说得通了。。

他急了。 哦对了 顺便说一句，有时候CORS错误不是真的CORS问题，可Neng是网络问题，huo者服务器挂了huo者接口路径写错了。suo以遇到错误先别急着改配置，先检查下是不是其他问题。我之前就吃过这个亏，搞了半天发现是服务器挂了白白浪费了好多时间。

我破防了。 还有就是啊，配置CORS的时候一定要仔细，有时候一个字母错了dou不行。比如Access-Control-Allow-Origin，少个sdou不行。我之前就犯过这种低级错误，搞了半天才发现。

总之啊，技术这东西就得慢慢摸索，多实践，多。遇到问题别怕，总有解决办法的。好了不说了我得去改代码了希望这篇文章Neng帮到大家，说到底。。

参考资料

其实吧， guan与CORS的资料网上有hen多，MDN文档就hen详细。虽然有时候kan不懂，dan是多kan几遍总Neng明白。还有就是各种技术博客，虽然质量参差不齐，dan是总Neng找到有用的信息，深得我心。。

一句话。 还有就是官方文档，各种框架的CORS配置方法dou不一样，Zui好还是kan官方文档。虽然有时候写得不清楚，dan是总是Zui准确的。

还有就是Stack Overflow， 上面有hen多CORS相关的问题，虽然hen多dou是重复的， 躺赢。 dan是有时候Neng找到意想不到的解决方法。

总之啊，遇到问题多查资料，多尝试，总Neng解决的。Zuo开发就是这样，不断学习，不断进步。好了 就说到这里吧，拜拜～

我跟你交个底... 啊对了再说一句，有时候CORS问题不是配置问题，是浏览器缓存的问题。刷新一下页面huo者清除浏览器缓存就好了。我之前就被这个坑了好几次总是以为是配置错了后来啊只是缓存问题。

还有就是啊， 不同的浏览器对CORS的支持可Neng不一样，有时候在Chrome上没问题，在Firefox上就有问题，huo者反过来。这个也得注意一下。

总之啊，CORS这个问题虽然烦人，dan是也是Web开发中必须掌握的知识。掌握了之后以后遇到类似的跨域问题就Neng轻松解决了。好了不说了我得去改代码了希望这篇文章Neng帮到大家。

啊，对了再说说再说一句，有时候CORS错误是假的，其实是其他错误。比如服务器返回500错误，dan是被浏览器包装成了CORS错误。这种时候就得kan服务器日志了别光盯着浏览器控制台，翻车了。。

还有就是啊，配置CORS的时候要的。Zui好是指定具体的域名，啥玩意儿？。

---