1. 程式人生 > >vue中axios解決跨域問題和攔截器使用

vue中axios解決跨域問題和攔截器使用

  1. vue中axios不支援vue.use()方式宣告使用。 所以有兩種方法可以解決這點:

    第一種: 在main.js中引入axios,然後將其設定為vue原型鏈上的屬性,這樣在元件中就可以直接 this.axios使用了

import axios from 'axios';
Vue.prototype.axios=axios;

components:

this.axios({
        url:"a.xxx",
        method:'post',
        data:{
            id:3,
            name:'jack'
        }
    })
    .then(function
(res){
console.log(res); }) .catch(function(err){ console.log(err); }) }

這裡需要注意一點,就是在axios中把請求到的資料 使用this複製給data是無效的,使用箭頭函式可以解決。

  1. vue cli腳手架前端調後端資料介面時候的本地代理跨域問題,如我在本地localhost訪問介面http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22’,是要跨域的才可以訪問的,如果直接訪問會報 XMLHTTPRequest can not load
    http://10.1.5.11:8080/xxx/duty?time=2017-07-07
    14:57:22’. Response to preflight request doesn’t pass access control….
    為什麼存在跨域問題?因為這是非同源互相通訊,具體可以自己去google瞭解,這裡只需要在webpack配置一下proxyTable就OK了,在config中找到index.js如下 :

config/index.js

dev: {
    proxyTable: {
      '/api': {
        target: 'http://10.1.5.11:8080/',//設定你呼叫的介面域名和埠號 
        changeOrigin:
true, //跨域 pathRewrite: { '^/api': '/' //這裡理解成用‘/api’代替target裡面的地址,後面元件中我們掉介面時直接用api代替 比如我要呼叫'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',直接寫‘/api/xxx/duty?time=2017-07-07 14:57:22’即可 } }

跨域成功,但是這只是開發環境(dev)中解決了跨域問題,生產環境中真正部署到伺服器上如果是非同源還是存在跨域問題,如我們部署的伺服器埠是3001,需要前後端聯調,第一步前端我們可以分生產production和開發development兩種環境分別測試,在config/dev.env.js和prod.env.js裡也就是開發/生產環境下分別配置一下請求的地址API_HOST,開發環境中我們用上面配置的代理地址api,生產環境下用正常的介面地址,所以這樣配置,分別在config/dev.env.js和prod.env.js兩個檔案中進行以下配置。

config/dev.env.js:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',//開發環境
  API_HOST:"/api/"
})

prod.env.js

module.exports = {
  NODE_ENV: '"production"',//生產環境
  API_HOST:'"http://10.1.5.11:8080/"'
}

當然不管是開發還是生產環境都可以直接請求http://10.1.5.11:8080//。配置好之後測試時程式會自動判斷當前是開發還是生產環境,然後自動匹配API_HOST,我們在任何元件裡都能用process.env.API_HOST來使用地址如:

instance.post(process.env.API_HOST+'user/login', this.form)

然後第二步後端伺服器配置一下cros跨域即可,就是access-control-allow-origin:*允許所有訪問的意思。綜上:開發的環境下我們前端可以自己配置個proxy代理就能跨域了,真正的生產環境下還需要後端的配合的。某大神說:此方法ie9及以下不好使,如果需要相容,最好的辦法是後端在伺服器埠加個代理,效果類似開發時webpack的代理。

  1. axios傳送get post請求問題
    傳送post請求時一般都要設定Content-Type,傳送內容的型別,application/json指傳送json物件但是要提前stringify一下。application/xxxx-form指傳送?a=b&c=d格式,可以用qs的方法格式化一下,qs在安裝axios後會自動安裝,只需要元件裡import一下即可。
const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}

const postData=Qs.stringify(this.formCustomer);//過濾成?&=格式
'Content-Type':'application/xxxx-form'}
  1. 攔截器的使用
    當我們訪問某個地址頁面時,有時會要求我們重新登入後再訪問該頁面,也就是身份認證失效了,如token丟失了,或者是token依然存在本地,但是卻失效了,所以單單判斷本地有沒有token值不能解決問題。此時請求時伺服器返回的是401錯誤,授權出錯,也就是沒有權利訪問該頁面。
    我們可以在傳送所有請求之前和操作伺服器響應資料之前對這種情況過濾。
// http request 請求攔截器,有token值則配置上token值
axios.interceptors.request.use(
    config => {
        if (token) {  // 每次傳送請求之前判斷是否存在token,如果存在,則統一在http請求的header都加上token,不用每次請求都手動添加了
            config.headers.Authorization = token;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 伺服器響應攔截器,這裡攔截401錯誤,並重新跳入登頁重新獲取token
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 這裡寫清除token的程式碼
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}   //登入成功後跳入瀏覽的當前頁面
                    })
            }
        }
        return Promise.reject(error.response.data) 
    });