Vue使用代理方式解决跨域问题
1、解决跨域问题
如果 Vue 前端应用请求后端 API 服务器，出现跨域问题（CORS），如下图：
解决方法：在 Vue 项目中，打开 vue.config.js 配置文件，在配置文件中使用代理解决跨域问题。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy: 'http://localhost:8085', //使用代理，解决跨域问题
}
})注意：配置代理完成后，请求的URL前面不需要再加上完整的域名了，示例如下：
function getUserInfo(userId) {
//使用 axios 的 GET 请求
axios({
method: 'GET',
//注意：因为配置了代理服务器（解决跨域问题），所以请求的URL前面不需要再加上完整的域名
//url: `http://localhost:8085/user/getUserInfo/${userId}` //错误
url: `/user/getUserInfo/${userId}` //正确
}).then(
function (response) {
userInfo.value = response.data;
}
).catch(function (error) {
alert("发生异常：" + error.message);
});
}最后重新启动项目就可以了。
2、配置说明
2.1 vue.config.js 配置文件
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
vue.config.js 官方文档：《vue.config.js 配置参考》
2.2 devServer.proxy 配置项
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}官方文档：《devServer.proxy 配置项》