vue 前端设置允许跨域_Vue3.X脚手架项目设置proxy前端跨域
序:
@vue/cli3.x 版本脚手架相对于2.X系列脚手架，对整个项目的构建都有很大的改动，所有的配置文件在初始化的项目中并没有生成。
所以很多刚接触3.X脚手架搭建的项目，不知道跨域代理配置到哪里。
跨域代理配置
由于3.x的默认配置都转移到了CLI service里，所以生成的项目中并没有配置项，我们如果需要自定义一些项目配置，则需要自己在项目根目录创建一个vue.config.js。vue.config.js里的配置项所有都是可选的，这就避免了我们去看一大堆不必要的默认配置，只需要配置自己需要的部分就行了。
新建配置文件
在根目录创建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脚手架跨域代理是不是配置也很简单？配置以后，就不用担心跨域问题了。