前言

首先，proxyTable是我們在本地開發環境中除錯介面用的，目的是為了解決本地跨域的問題，因為本地地址為localhost:xxxx/xxx

在線上的生產環境是沒用的！！！

假設我們用的是vue-cli命令列工具生成的webpack專案模板，我們很容易能在config資料夾下面找到index.js檔案。

本地如何配置

假設我要請求的地址為

'http://p.iotwhere.com:38080/scada/json/aa.tpl'

我們在index.js檔案中找到如下程式碼：我推薦了一種寫法，後面我會說為什麼

那麼我請求的那段程式碼就是這樣的

axios.get('/scada/json/aa.tpl'
 
).then((res) => {
    //........
})

繼續向下看，乾貨還在後面

假設幾種其它的寫法

假設一

如果proxyTable配置是這樣的

proxyTable: {
  '/scada': {
    target: 'http://p.iotwhere.com:38080', 
    changeOrigin: true,
    pathRewrite: {
        '^/scada': '/'     
    }
  }

那麼我們的請求程式碼必須寫成這樣

axios.get('/scada/scada/json/aa.tpl').then
 
((res) => {
    //........
    //是不是有點難受
})

假設二

如果proxyTable配置是這樣的，也就是重新起個名字

proxyTable: {
  '/api': {
    target: 'http://p.iotwhere.com:38080', 
    changeOrigin: true,
    pathRewrite: {
        '^/api': '/'     
    }
  }

那麼我們的請求程式碼必須寫成這樣

axios.get('/api/scada/json/aa.tpl').then((res) => {
    //
 
........
    //這種寫法還能接受，但是有個致命的缺點
})

再向下看，看看我推薦的寫法的真真優勢

打包上線的問題

這裡只說程式碼上線之後和介面在同源情況下，如果不同源則存在跨域，這裡先不考慮這種情況

上線後的程式碼為生產環境，沒有了proxy

那麼他是怎麼解析請求的呢？比如下面這個請求

axios.get('/scada/json/aa.tpl').then((res) => {
    //........

})

那麼如果按照上面我說的假設一或者假設二的寫法呢？

所以，假設一和假設二需要在打包之前修改請求地址才能打包，增加了許多不必要的麻煩

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[email protected]