最近，我写了一些关于在前端和后端分离后跨域相关解决方案的基本原理和常见误解的帖子，包括CORS和Nginx反向代理。这两个程序都在使用中，每个程序都有自己的优点和缺点。关于使用哪种解决方案，每个人的观点都不一致。本文主要是关于这一点，从前到后和服务器配置，安全性和可移植性。在可扩展性等方面，详细比较两种方案的优缺点，以便在以后选择方案时帮助大家。
前端配置
CORS方案：某些浏览器在跨域时默认不携带cookie。因此，为了携带cookie，您需要设置xmlhttprequest的withCrendetails属性。使用vue-resouce时，请按如下所示进行设置：
Vue.http.options.credentials=true
使用axios时，您可以在拦截器中设置它，如下所示：
Axios.interceptors.request.use（（config）=>
{
config.withCredentials=true
返回配置
}，（错误）=>
{
返回Promise.reject（错误）
}）
以下使用本机XMLHttpRequest对象，
Var xhr=new XMLHttpRequest（）；
xhr.withCredentials=true；
如果您不需要传递cookie，最好将其设置为false以避免浏览器默认允许携带cookie。
Nginx反向代理：此时，前端相当于不跨域，与普通请求一致，无需额外配置。
后端配置
CORS解决方案：后端需要打包ACA系列接头。
'Access-Control-Allow-Origin''*'；
'Access-Control-Allow-Credentials''true'；
'访问控制 - 允许 - 标题''X-Requested-With'；除此之外，不需要其他配置。
Nginx反向代理：此时，后端相当于不跨域，与正常请求一致，不需要额外配置。
服务器配置
CORS计划：无。
Nginx反向代理：该解决方案的跨域工作主要集中在nginx服务器上，配置如下：
...
Proxy_set_header X-Real-IP $ remote_addr；
Proxy_set_header X-Real-Port $ remote_port；
Proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for；
...
位置/api {
Proxy_passhttps://b.test.com； ＃设置代理服务器的协议和地址
Proxy_cookie_domain b.test.com a.test.com； ＃修改cookie，相互写cookie以获取请求和响应
}
...
安全
CORS方案：由于浏览器默认添加origin属性，服务器可以直接查找请求的来源，方便控制源和阻塞黑名单链接。同时，将公开服务器域名和端口。
Nginx反向代理：反向代理方案中没有默认的原始标头，但您可以通过X-Forward-For标头查看客户端和所有级别的代理IP。您还可以实现一定程度的回溯和黑名单阻止。 。由于反向代理可以使用Intranet地址访问接口服务器，因此可以保护接口服务器不受某种程度的暴露。
迁移灵活性和可扩展性
CORS解决方案：您只需在代码或配置中心配置黑白列表，便于移植和扩展。
Nginx反向代理：不同的环境服务域名可能不一致，因此nginx配置也不同，不便于移植。对于可伸缩性，当新项目需要访问接口服务器时，您需要首先访问nginx中服务器指定的域名，然后通过服务器域名反向代理到接口服务器，例如：
服务器{
听8443；
Server_name a.test.com；
Client_max_body_size 100m；Ssl ......
位置/微{
Proxy_passhttps://b.test.com； ＃反代理
Proxy_cookie_domain b.test.com a.test.com； ＃修改饼干
Add_header'Access-Control-Allow-Origin''htps: //c.test.com'；
Add_header'Access-Control-Allow-Credentials''true'；
Add_header Access-Control-Allow-Headers X-Requested-With；
}
}
此时，跨域模型已发生变化。从简单的a.test.com反向代理到b.test.com，它成为b.test.com和c.test.comCORS的a.test.com反向代理转到a.test.com然后反向代理到b.test.comd。这有点徘徊，但如果你想一想，你就会理解。这无疑会增加后期的维护成本。
综合比较
总之，我们可以粗略地获得以下图标：
对比结论
总而言之，对于公共基础设施服务，可能会有更多涉及对接的前端项目，并且有更多的开发和测试部署环境。总的来说，我更愿意推荐使用CORS解决方案。对于一些强烈反对的小项目，使用nginx可以降低开发成本并快速在线启动。具体用途当然必须与实际工作相结合，并根据需要使用。
另外，对于Nginx反向代理解决方案，建议使用内部域名/ip作为接口服务器的接口，尽量不要暴露在外面，以免造成不必要的安全问题。

• 上一篇: 蓝盟IT外包，元宇宙：四梁八柱是什么
  下一篇: Last XP：嵌入式Windows Embedded POSReady 2009服务停止

• 分享到：