Vue跨域配置

54 阅读1分钟

何为跨域

CORS是一个W3C标准,全称是跨域资源共享。所谓跨域就是违背了浏览器的同源策略,那么同源策略又是什么呢?同源策略要求请求两侧的三个一致:协议一致、主机名一致、端口号一致。注意:这是浏览器的一种策略。

解决跨域

解决跨域有不同的方法,这里说一下通过配置代理服务器的方法解决。那么何为代理服务器呢?通俗的来说就是一个中间上,而且不赚差价:浏览器要代理服务器请求数据,代理服务器再把请求转给真正的服务器;而服务器返回也是直接返回数据给代理服务器,代理服务器再把数据返回给浏览器,而代理服务器和发生请求的服务器之间压根就没有同源策略这一限制,不会存在跨域问题,(同源策略是浏览器的规则)

在vue页面中发送请求

image.png

Vue的跨域配置

在vue.config.js配置

image.png

pathRewrite方式1: ‘^/vue’: ‘/java’

image.png

axios请求 /vue/auth/–>http://localhost:8080/vue/auth/

image.png

image.png

pathRewrite方式2: ‘^/vue’: ‘’

image.png

axios请求 /vue/auth/–>http://localhost:8080/vue/auth/

image.png

npm run dev重启

建议写法如下

image.png