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

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

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

proxyTable: {
      ‘/restful‘:{
        target:‘http://xxxxx/member/service/‘,
        changeOrigin:true,
        pathRewrite:{//可以不寫
            ‘^/restful‘:‘/restful‘
        }
      }
    },

changeOrigin

接口調用的時候可以這麽寫

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參數，接收一個布爾值，如果設置為

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

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