300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue.js + springboot 编写前后端分离项目产生的跨域问题

vue.js + springboot 编写前后端分离项目产生的跨域问题

时间:2019-02-27 21:48:26

相关推荐

vue.js + springboot 编写前后端分离项目产生的跨域问题

在开发前后端分离的网站时,跨域是我们经常能遇到的问题。对于没有经验的开发者来讲,在开发过程中跨域也是一个很棘手的问题。

产生跨域问题的原因

浏览器出于安全原因会阻拦不同域名之间的请求,以防止跨域攻击。跨域攻击是通过浏览器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 。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。