在vue的時間開發過程中遇到比較頭疼的事情之一，就是在本地與非本地環境中的介面進行聯調。最常遇見的就是跨域問題，一把的解決方法有三種：

1. 後臺更改header（注：這是後臺的事，我們做不了）

2. 使用JQuery提供的jsonp  (注：只為了使用jsonp而引入Jquery，有點浪費哈)

3. 使用http-proxy-middleware 代理解決（注：專案使用vue-cli腳手架搭建，常用並且好用）

這裡我主要記錄的就是第三中方法，步驟如下：

假設需要請求的介面：http://f.apiplus.cn/bj11x5.json

1.  開啟config/index.js,在proxyTable中添寫如下程式碼：

proxyTable: { 
  '/api': {     //使用"/api"來代替"http://f.apiplus.cn" 
    target: 'http://f.apiplus.cn',    //源地址 
    changeOrigin: true,    //改變源 
    pathRewrite: { 
      '^/api': ''     //路徑重寫，也可以寫成 '^/api': 'http://f.apiplus.cn'
      } 
  } 
}

 2、頁面中使用axios請求資料時直接使用 “/api” 代替：

methods: {
    getData () { 
        // /api 代替了伺服器地址 'http://f.apiplus.cn'
        axios.get('/api/bj11x5.json', function (res) { 
           console.log(res) 
    })
}

這樣，就可以完成跨域請求的需要了。在請求時地址只需要寫 '/api/bj11x5.json' 即可，而 '/api' 對應的伺服器地址的解析過程webpack會進行轉發！

但是，通過這種方法解決跨域，打包部署時會出問題。原因是因為在生產環境中時並沒有使用 “/api” 代替：

解決方法有兩種：

方法一：定義兩個變數（手動判斷，不依靠webpack進行派發）

解決思路：在開發環境是，該變數 = ‘/api’；在生產環境時，變數 = 'http://f.apiplus.cn' (相等於重寫) 

let serverUrl = '/api'    //開發環境時 
// let serverUrl = 'http://f.apiplus.cn/'    //生產環境時 
export default { 
   dataUrl: serverUrl + '/bj11x5.json' 
}

方法一：給專案配置API_HOST（自動判斷，依靠webpack進行派發）

解決思路：在config/dev.env.js和prod.env.js裡也就是開發/生產環境下分別配置一下請求的地址API_HOST，開發環境中我們用上面配置的代理地址api，生產環境下用正常的介面地址。

config/dev.env.js：

module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',    //開發環境
   API_HOST:"/api/"
})

prod.env.js：

module.exports = {
   NODE_ENV: '"production"',        //生產環境
   API_HOST:'"http://10.1.5.11:8080/"'
}

參考部落格：https://www.cnblogs.com/wangyongcun/p/7665687.html

                  https://blog.csdn.net/kirinlau/article/details/78611774

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出

對部落格文章的參考，若原文章博主介意，請聯絡刪除！請原諒