最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理。这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主要就此展开一下,从前后端及服务器配置、安全性、移植灵活性、扩展性等方面详细对比一下两种方案的优缺,以便于后期在方案选型上对大家有所帮助。
前端配置
CORS方案:跨域时部分浏览器默认不携带cookie,因此为了携带cookie需要设置一下xmlhttprequest的withCrendetails属性,使用vue-resouce时设置如下
Vue.http.options.credentials = true
用axios时,可以在拦截器中设置如下
axios.interceptors.request.use((config) => {
config.withCredentials = true
return config
}, (error) => {
return Promise.reject(error)
})
使用原生XMLHttpRequest对象时如下,
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
如果不需要传递cookie,最好置成false,避免不嗯浏