解決vue-axios和vue-resource跨域問題

我的博客同步文章 https://mr-houzi.com/2018/02/...

最近在學習vue，在vue中沒有ajax，而是利用vue-resource和vue-axios進行數據通訊。Vue2.0以後，官方推薦使用vue-axios。

問題

在使用vue-axios的post請求時出現跨域問題。報錯以下：

Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8081' is therefore not allowed access. 
The response had HTTP status code 404.

解決

步驟

在config/index.js裏添加proxyTable代理方法

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

target爲目標地址

pathRewrite下爲重定向地址(正常狀況下爲空便可)

完整地址爲http://api.com/vue

而後在組件中請求以下：

created(){
    axios.post('/api/Login', {
       data: 'data'
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}

結果則是向http://api.com/vue/Login地址發送請求

特別聲明

設置proxyTable代理方法後，須要註釋掉引入在main.js設置的baseUrl，否則proxyTable無效，依然出現跨域報錯。（這個很是重要，困惑了本身很久）

//main.js
// axios.defaults.baseURL = 'http://api.com/';//設置proxyTable代理解決跨域問題後註釋掉baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

PS:vue-resource解決跨域問題同vue-axios同樣設置proxyTable代理方法，不過不須要特別聲明中的內容了。