解決webpack+vue-cli+vue-resource中跨域問題

前兩天我遇到一個特別棘手的問題，問題呈現的樣式大概是這個樣子的

根據以往的經驗看到XMLHttpRequest cannot load這段代碼天然想到的是跨域問題，跟服務端講了這件事情以後，服務端就加上了支持跨域的代碼，可是前端仍是調不到數據，而後查了不少資料，最後找到一種解決辦法

在config文件下面有index.js文件裏有一個叫proxyTable的配置參數

proxyTable: {
      '/restful':{
        target:'http://xxxxx/member/service/',
        changeOrigin:true,
        pathRewrite:{
            '^/restful':'/restful'
        }
      }
    },

changeOrigin這參數設置爲true的時候，就能夠虛擬一個本地代理的服務接收請求這樣就能夠解決跨域問題了
target是你請求接口的域名

接口調用的時候能夠這麼寫

this.$http.post(commonUrl + "/restful/member?op=getMember&access_token=111", {
          op: 'getMember',
        }).then(response => 
        }, response => {

        });
      },

若是

proxyTable: {
      '/restful':{
        target:'http://xxxxx/member/service/',
        changeOrigin:true,
        pathRewrite:{
            '^/restful':''
        }
      }
    },

'^/restful':'‘

restful後面是空的話那麼接口就應該這麼寫

this.$http.post(commonUrl + "/restful/restful/member?op=getMember&access_token=111", {
          op: 'getMember',
        }).then(response => 
        }, response => {

        });
      },

上面我寫的commonUrl主要是爲了在傳到生產環境的時候方便使用的一個全局變量

寫一個全局的js

在裏面設置一個全局變量commonUrl

const IS_DEBUG = true //若是是測試環境就是true，若是是生產環境就是false
const commonUrl = IS_DEBUG ? '':'http://xxxxx/member/service/'