Vue3.X脚手架项目设置proxy前端跨域

序:

@vue/cli3.x 版本脚手架相对于2.X系列脚手架，对整个项目的构建都有很大的改动，所有的配置文件在初始化的项目中并没有生成。

所以很多刚接触3.X脚手架搭建的项目，不知道跨域代理配置到哪里。

跨域代理配置

由于3.x的默认配置都转移到了CLI service里，所以生成的项目中并没有配置项，我们如果需要自定义一些项目配置，则需要自己在项目根目录创建一个vue.config.js。vue.config.js里的配置项所有都是可选的，这就避免了我们去看一大堆不必要的默认配置，只需要配置自己需要的部分就行了。

官网地址:https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

新建配置文件

在根目录创建vue.config.js文件，这个配置文件在运行项目的时候自动加载。

// vue.config.js

module.exports = {

devServer: {

proxy: {

'/api': {

target: 'http://22.163.72.64', //对应服务器地址

changeOrigin: true, //允许跨域

ws: true,

pathRewrite: {

'^/api': ''

}

}

}

}

}

发送请求

设置之后，发送请求时，将/api 当做域名就可以了。 例：

axios.get("api/test/login")

.then((res) => {

console.log(res)

})

这个就相当于

axios.get("http://22.163.72.64/test/login")

.then((res) => {

console.log(res)

})

好啦，vue3.X脚手架跨域代理是不是配置也很简单？配置以后，就不用担心跨域问题了。