vue 请求代理==>>跨域问题

以下配置仅适用于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

第二步

在vue.config.js文件中添加下面配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 请求链接匹配
        target: '<url>', // API 服务器域名
        ws: true, // 是否启用websockets
        changeOrigin: true // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
      },
      '/foo': { // 另外一个连接匹配
        target: '<other_url>' // API 服务器域名
      }
    }
  }
}

第三步

在请求链接的时候可以如下写法（此处以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
});

这样请求的时候请求的是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才会应用。