vue如何配置服务器端跨域_Vue 项目如何配置代理解决跨域

是什么是跨域？

由于浏览器的同源策略(SOP: same origin policy)的存在，只有协议、域名和端口三者都相同的情况下，相互之间才可以进行交互，任何一个不同，哪怕是同一域名下不同端口，也无法正常交互，这便是跨域；

解决跨域的方法有哪些？

常见的解决跨域的方案有JSONP(jsonp的原理是动态插入script标签)，node.js中间件解决跨域，nginx代理跨域，WebSocket协议跨域等

在Vue 3.0项目中，可以通过如下配置解决跨域：

在根目录下新建一个  vue.config.js 文件  (ps:  2.0版本下有该文件，直接修改，3.0版本需要新建该文件)

module.exports = {

//相当于webpack-dev-server, 对本地服务器进行配置

devSever : {

proxy: {

"/api" : {

target: " http://localhost:3000 ", //需要跨域的目标url ,我这里是自己本地起的一个服务端口

changeOrigin: true, // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404

ws: true,

pathRewrite: {

" ^/api " : "" //若请求的路径在目标url下但不在/api 下，则将其转换成空

}

}

}

}

}