在开发前后端分离的网站时,跨域是我们经常能遇到的问题。对于没有经验的开发者来讲,在开发过程中跨域也是一个很棘手的问题。
产生跨域问题的原因
浏览器出于安全原因会阻拦不同域名之间的请求,以防止跨域攻击。跨域攻击是通过浏览器cookies的漏洞,让一个危险网站通过保存的cookies进行一些危险的操作。具体跨域攻击的技术细节和防御原理在这里就不多讲了。
一般来讲,当两个地址的协议、主机名、端口有一个不一样的时候,就会被视为跨域。
前后端分离项目的跨域问题
生产环境
在前后端分离项目的生产环境中,前端只是一些静态文件。
举个例子,我们可以把打包好的jar包跑在81端口,然后用nginx来监听80端口,并用root来指定打包好的静态前端文件。所有对后端server的访问都可以通过nginx来转发,所以不会产生跨域问题。
开发环境
在开发环境中,一般我们会把前端项目用node跑在本地(localhost)的某个端口上(默认8080),同时,spring boot会跑在本地的另一个端口上(无法与node server跑在同一个端口)。由于端口不同,此时会产生跨域问题。
在开发环境中,我们可以在vue的根目录下建立一个文件:vue.config.js (需跟package.json 在同一文件夹):
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:81",
changeOrigin: true,
ws:true,
pathRewrite: {
"/api/": '/api/'
}
}
}
}
};
这样前端文件中所有对/api 的访问都会被自动转发至localhost:81 ,从而解决了开发环境产生的跨域问题。
这段代码中,devServer.proxy 就是为前端跨域请求设置的代理,changeOrigin: true 代表了请求需要跨域,必须要加,而pathRewrite 为路径重写表,代理转发请求的时候会按照该表重写请求。更多具体参数可以参考vue.js的官方文档:devServer.proxy 。