最近写了一些帖子，介绍前后端分离项目后跨域相关解决方案的基本原理和常见误区，主要包括CORS和Nginx反向代理。这两种方案在项目中使用，各有优缺点。关于采用哪种方案，每个人的看法都不尽相同。本文主要就此展开，从前后端和服务器配置、安全以及迁移的灵活性、可扩展性等方面详细对比两种方案的优缺点，以帮助大家在稍后选择解决方案。前端配置CORS方案：部分浏览器在跨域时默认不携带cookies，所以为了携带cookies，需要设置xmlhttprequest的withCrendetails属性。使用vue-resouce时，设置如下：Vue.http.options.credentials=true使用axios时，可以在拦截器中设置如下：axios.interceptors.request.use((config)=>{config.withCredentials=truereturnconfig},(error)=>{returnPromise.reject(error)})使用原生XMLHttpRequest对象时，varxhr=newXMLHttpRequest();xhr.withCredentials=真；如果不需要传递cookies，最好设置为false，以免浏览器默认携带cookies。Nginx反向代理：此时前端相当于不跨域，与正常请求一致，不需要额外配置。后端配置CORS方案：后端需要包裹ACA系列header，'Access-Control-Allow-Origin''*';'Access-Control-Allow-Credentials'"true";'Access-Control-Allow-Headers''X-Requested-With';无需额外配置。Nginx反向代理：此时后端相当于不跨域，与正常请求一致，不需要额外配置。服务器配置CORS方案：无。Nginx反向代理：本方案的跨域工作集中在nginx服务器上，配置如下：...proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Real-Port$remote_port;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;...location/api{proxy_passhttps://b.test.com;#设置代理服务器的协议和地址proxy_cookie_domainb.test.coma.test.com;#修改cookie，将cookie写入每个otherforrequestandresponse}...安全CORS解决方案：由于此时浏览器会默认添加origin属性，服务器端可以直接找到请求的来源，方便控制来源和屏蔽黑名单链接。同时会暴露服务器域名和端口。Nginx反向代理：反向代理方案中没有默认的originheader，但是可以通过X-Forward-Forheader查看各级客户端和代理IP，同时也实现了一定程度的回溯和黑名单屏蔽。在反向代理中，可以使用内网地址访问接口服务器，可以在一定程度上保护接口服务器不被暴露。移植灵活性和可扩展性CORS方案：只需要在代码或配置中心配置黑白名单，方便移植和扩展。Nginx反向代理：不同环境下的服务域名可能不一致，所以nginx配置也不同，不易移植。为了扩展性，当有新项目需要访问接口服务器时，需要先访问nginx中服务器指定的域名，然后将服务器域名反向代理到接口服务器，例如:server{listen8443;server_namea.test.com;client_max_body_size100m;ssl...location/micro{proxy_passhttps://b.test.com;#反向代理proxy_cookie_domainb.test.coma.test.com;#修改cookieadd_header'访问-Control-Allow-Origin''https://c.test.com';add_header'Access-Control-Allow-Credentials'"true";add_headerAccess-Control-Allow-HeadersX-Requested-With;}}这时候，跨域模型发生了变化，从简单的a.test.com反向代理到b.test.com变成a.test.com反向代理到b.test.com和c.test.comCORS到a.test.com然后反向代理到b.test。comd的情况。这有点绕口，但是仔细想想就明白了。这无疑增加了后期的维护成本。综合对比基于以上，我们大致可以得到如下图示：对比结论综上所述，对于公共基础服务，由于可能对接相关的前端项目较多，开发、测试、部署环境较多，我整体上我更倾向于推荐它。我们使用CORS方案。对于一些反对强烈的小项目，使用nginx可以降低你的开发成本，快速开发，快速上线。当然，具体使用也要结合实际工作，按需使用。另外，在使用Nginx反向代理方案时，建议使用内部域名/ip作为接口服务器的入口，尽量不要对外暴露，避免出现不必要的安全问题。
