vue+axios+webpack配置跨域（axios配置）

原文鏈接：https://www.jianshu.com/p/de7d3f0520b4

開發和生產環境下跨域設置
開發和生產環境下跨域設置
什麼是跨域？

瀏覽器有一個叫做同源策略的東西。同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。
同源策略規定了如果兩個頁面的協議、域名、端口中任意一個不相等，就認爲兩個頁面具有不相同的源
兩個不同源的頁面資源交互會受到瀏覽器的同源策略限制，也就出現了我們說的跨域問題。

配置proxyTable解決跨域問題
我們使用vue-cli生成的項目目錄裏，config下面的index.js有個proxyTable屬性：

proxyTable: {
      // 這裏可以理解爲使用"/api" 代替 "target" 裏的地址，
     // 比如說我們要調用的地址是 http://www.example.com/api/list,   則寫成 /api/list 就可以了
      '/api': {
        target: 'http://www.example.com',  // 你請求的api地址
        secure: false,                    // 如果是https接口，需要配置這個參數
        changeOrigin: true        //這個參數是用來回避跨站問題的，配置完之後發請求時會自動修改http header裏面的host
        pathRewrite: {
          '^/api': '' //路徑重寫，也可以寫成 '^/api': 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/'
        }
      }
    },

那麼爲什麼我們設置這個proxyTable可以幫我們解決跨域問題呢？

其實vue-cli裏的這個設置來自於其集成的插件 http-proxy-middleware

github: https://github.com/chimurai/http-proxy-middleware

這個插件可以幫我們在本地虛擬一個服務器接收請求並代替你發送該請求，因爲是在服務端替我們發請求所以就沒有我們煩惱的跨域問題了，當然這隻適用於開發環境。

項目上線怎麼辦？

我們通過配置proxyTable解決了本地開發環境請求接口跨域的問題，但是我們項目上線還是要替換成線上的接口地址的。如果我們的前端項目合後端服務不在同一個域名下，我們可以使用目前比較流行的 CORS 來處理跨域。這裏就不展開講了。

我們可以利用webpack配置的環境變量來實現開發環境和打包後的api區分
假設我們使用axios進行請求發送，如下配置：

import axios from 'axios';
 
const config = {
  timeout: 60000，
  withCredentials: true        // 訪問線上api時axios發送跨域請求時需要設置這個參數
}
 
if(process.env.NODE_ENV === 'development') {
  // 開發環境
} else if(process.env.NODE_ENV === 'production') {
  // 生產環境
  config.baseURL = "http://www.baidu.com";   //這裏是線上api請求地址
}
 
const server = axios.create(config);

這樣配置後我們開發環境中就可以使用proxyTable代理請求，項目打包後請求地址就會被替換成線上的api地址。
假設我們開發環境請求的api地址爲 http://www.example.com/api/list
線上環境請求的api地址爲 http://www.baidu.com/api/list
那麼我們發請求的時候只需要這麼寫：

server.get("/api/list").then(res => {
    ...
})