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已進行了映射，所以不會觸發跨域檢測。

   此時效果已經完成。