vue-webpack項目本地開發環境設置代理解決跨域問題

前言：

一般跨域問題只要后端配置好的話，是不需要前端做處理的，但也不能保證你遇到的所有后端都能很好的處理這個問題，這個時候可能就需要前端設置代理解決這個問題了。

配置方法：

1. config/index.js

  proxyTable: {
        '/api': {
            target: 'http://192.168.8.8:8080', // 要訪問接口的域名
            // secure: false,  // 如果是https接口，需要配置這個參數
            changeOrigin: true, // 如果接口跨域，需要進行這個參數配置
            pathRewrite: {
              '^/api': ''//重寫接口訪問
            }
          }
    },
  host: 'localhost',//本機Ip或localhost

注意：/api一定要有，命名可以不一樣。

網絡請求封裝文件：

//baseUrl本地訪問直接用代理，其他環境用配置域名
axios.defaults.baseURL = location.href.indexOf("localhost") > 0 ? "api" : server.DOMIN

如上，如果是本地環境，則直接使用本地代理（這時就跟server.js配置的域名就無關了），否則使用對應環境配置的服務器地址。

后記：

最近一個項目出現跨域問題，后端未能段短時間內處理，所以就不等了，前端改改代碼先聯調吧。配置過程中發現無法支持https（雖然配置中有secure 這個配置，貌似沒用）。

如非必須，不建議前端做代理，原則上前端可以根據運行環境自動選擇對應環境的服務器地址，只要和后端約定好，可以做到一次打包，同事支持開發、測試、生產等多種環境的，無需每次打包都要改域名，不僅麻煩，還容易出錯。