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

當遊覽器報這樣的錯時,表示你的請求須要跨域!

這裏,我說的是使用webpack+vue-cli+vue-resource中跨域問題,

 

在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 => {

        });
      },

有關於API proxy的說明，使用的就是這個參數。
https://vuejs-templates.github.io/webpack/proxy.html

這個參數主要是一個地址映射表，你能夠經過設置將複雜的url簡化，例如咱們要請求的地址是api.xxxxxxxx.com/list/1，能夠按照以下設置：

 

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    pathRewrite: { //能夠不寫
      '^/list': '/list'
    }
  }
}

 

這樣咱們在寫url的時候，只用寫成 /list/1 就能夠表明api.xxxxxxxx.com/list/1.
那麼又是如何解決跨域問題的呢？其實在上面的'list'的參數裏有一個changeOrigin參數，接收一個布爾值，若是設置爲true,那麼本地會虛擬一個服務端接收你的請求並代你發送該請求，這樣就不會有跨域問題了，固然這隻適用於開發環境。增長的代碼以下所示：

 

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}