请求代理==>>跨域问题
以下配置仅适用于vue cli3。
在前后端分离的项目中，一般在开发过程中，前端应用是在本地localhost运行的，但此时 API 接口在其他主机上，这是进行 API 请求的时候就会产生跨域问题。
这个时候你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。
用法也很方便：
第一步
首先需要确定你是否安装过http-proxy-middleware，如果已经安装可以跳过此步。
安装http-proxy-middleware：
npm install --save-dev http-proxy-middleware
1
第二步
在vue.config.js文件中添加下面配置：
module.exports = {
devServer: {
proxy: {
'/api': { // 请求链接匹配
target: '<url>', // API 服务器域名
ws: true, // 是否启用websockets
changeOrigin: true // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
},
'/foo': { // 另外一个连接匹配
target: '<other_url>' // API 服务器域名
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
第三步
在请求链接的时候可以如下写法（此处以axios请求为例）：
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
这样请求的时候请求的是http://localhost:8080/user?ID=12345会被代理到 API 服务器即：http://www.fxss5201.cn/user?ID=12345（假设上面第二步设置的域名是http://www.fxss5201.cn/）。
第四步
重启vue-cli-service serve，记住每次修改vue.config.js文件中的配置都要重启serve才会应用。