好些小伙伴遇到跨域的问题问我，我也是很是纳闷。为什么你们都碰到了跨域就我没碰到过？？前端项目也有好多个了(难道是后端大哥默默给我背下了所有？感动.jpg)，于是抱着对后端的大哥的发自肺腑感动，对于这个问题深入研究了下

MDN传送门 developer.mozilla.org/zh-CN/docs/…

同源策略覆盖的面很大,它属于 跨源网络访问 其他还有跨源脚本API访问、 跨源数据存储访问，默认情况下，XHR 只能访问与发起请求的页面在同一个域内的资源。但是浏览器也要支持跨源网络访问这个操作，故cors是合法跨域网络请求的解决方案，但是需要合理的配置它。

跨源资源共享（CORS，Cross-Origin Resource Sharing）定义了浏览器与服务器如何实现跨源通信。CORS 背后的基本思路就是使用自定义的 HTTP 头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败。----摘自JavaScript高级设计第四版

当然它在mdn中，我们可以在文档中找到他， CORS CORS errors

之前理解的cors是因为浏览器同源安全策略，以为是请求根本没有到后端服务器，被浏览器拦截了（错误的理解）。只要headers改变了，就会有这个options预请求，可以让服务器和xhr请求互相了解HTTP头。

产物如下

前端 localhost:8000

express localhost:3000

因为端口的不同，发生了以下错误

服务器控制台

配置了express，cors插件

配置后，http正常发出，response结果正常收到

首先我们（vue、react开发）常用的脚手架打包工具大多数用了webpack，大多数用到了webpack-dev-server简称 devServer 一个小型的express服务器，搭建了前端服务，这样我们就可以在浏览器中使用http请求访问我们写的页面了，当然这里面又是一堆知识这里不多加赘述。其中umi用的并不是devServe用的自己内置的服务模块。

但是他们都用到了http-proxy-middleware,这个强大的代理URL插件

target是真正访问的地址，pathRewrite可以重写路径(具体见http-proxy-middleware)

代理是将本地的服务端端口target到目标服务器，故我们在写xhr请求的时候应该用本地origin即window.location.origin就行

好多都是这个原因，使用请求时，请求的直接是目标服务地址了，那么这个配置就不会发生作用了

于在服务器端设置cors的不同是，response会增加一个key为x-real-url的字段,同样access-control-allow-origin也会被写为*，而后端使用cors的这个参数为Access-Control-Allow-Origin,这里没有深入的了解。 如果对于全局的可以这样使用