vue-cli3 配置请求代理，去除开发环境api跨域问题

开发项目时，生产环境中往往不会有跨域问题，但是开发环境中调试api却有跨域问题，因为开发环境是本地的ip地址，此时需要进行请求api的代理映射。

1. 在根目录中创建 vue.config.js文件

2. 在该文件中写配置：

   // 作为配置文件，直接导出配置对象即可
   module.exports = {
       devServer: {
           // 设置主机地址
           // host: 'http://192.168.10.146',
           // 设置默认端口
           port: 8080,
           //默认打开浏览器
           open: true,
           // 设置代理
           proxy: {
               '/api': {
                   // 目标 API 地址
                   target: 'http://xxx.com:2086',//真实的api地址
                   // 如果要代理 websockets
                   // ws: true,
                   // 将主机标头的原点更改为目标URL
                   changeOrigin: true,
                   pathRewrite: {
                       '^/api': ''
                   }
               }
           }
       }
   }
   

   本质上就是把 带/api的请求地址 映射到真实的请求地址上，并开启changeOrigin: true,. 在映射的过程中，用pathRewrite去除掉多余的api路径信息。

3. 修改请求

if (process.env.NODE_ENV == 'development') {//开发环境
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'production') {//生产环境
    axios.defaults.baseURL = 'http://xxx.com:2086/';
}

这里，开发环境请求地址前缀变为：http://localhost:8080/api ， 符合映射代理的要求，将会开始映射。

4. 一个完整的请求：

   http://localhost:8080/api/admin/login

   将映射为

   http://xxx.com:2086/admin/login

   此时因为origin已进行了映射，所以不会触发跨域检测。

   此时效果已经完成。