詳解axios設置header

一、axios設置header跨域

在跨域請求中，前端需要設置{‘ ‘}Access-Control-Allow-Headers{‘ ‘}來允許header中的自定義欄位。同時後端也需要設置{‘ ‘}Access-Control-Expose-Headers{‘ ‘}來暴露header中的自定義欄位。

在axios中，可以通過設置{‘ ‘}withCredentials: true{‘ ‘}來攜帶跨域請求的cookie信息。然後在請求頭中中設置{‘ ‘}Access-Control-Allow-Credentials{‘ ‘}為{‘ ‘}true{‘ ‘}即可。

axios.get(url, {
  withCredentials: true,
  headers: {
    'Access-Control-Allow-Credentials': true,
    'Access-Control-Allow-Origin': 'http://example.com'
  }
})

二、axios設置headers

在axios中設置header，可以通過{‘ ‘}headers{‘ ‘}進行設置。我們可以在創建axios實例的時候設置公共的headers，也可以在每個請求中單獨配置headers。

如果需要在每個請求中攜帶固定的headers，可以通過{‘ ‘}axios.defaults.headers.common{‘ ‘}來設置公共的headers。

// 設置公共的headers
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 發送請求時攜帶headers
axios.get(url, {
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'authorization': AUTH_TOKEN
  }
})

三、axios設置header解決跨域

在跨域請求中，如果沒有特定的header設置，伺服器可能會拒絕請求或者出現錯誤。我們可以通過在axios設置header來解決跨域問題。

針對特定的跨域問題，我們可以根據要求設置相關的header，比如在發送跨域請求時，可以設置{‘ ‘}Origin{‘ ‘}和{‘ ‘}Referer{‘ ‘}欄位。

axios({
  method: 'post',
  url: 'http://api.example.com',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Origin': 'http://example.com',
    'Referer': 'http://example.com'
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

四、axios設置header無效

在使用axios設置header的過程中，可能會出現設置header無效的情況。這時，需要檢查設置的header名字是否正確、大小寫是否匹配、是否存在拼寫錯誤等問題。

另外，如果有使用中間件對請求進行處理，也需要檢查中間件是否對header進行了修改。比如，一些安全中間件會禁止一些特定的請求頭，導致設置的header無效。

五、axios設置header不生效

在axios發送請求時，可能會出現設置header不生效的情況。這時，需要檢查是否存在其他配置對請求頭進行了覆蓋。

比如，在axios發送post請求時，設置請求頭為{‘ ‘}Content-Type: 'application/x-www-form-urlencoded'{‘ ‘}時，實際請求頭卻變成了{‘ ‘}Content-Type: 'application/json;charset=UTF-8'{‘ ‘}。這時，可能是因為axios默認對post請求設置了{‘ ‘}Content-Type: 'application/json;charset=UTF-8'{‘ ‘}。

解決這個問題，可以通過在請求的{‘ ‘}config{‘ ‘}中重新設置{‘ ‘}Content-Type{‘ ‘}欄位。

axios.post(url, qs.stringify(data), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [function (data) {
    // 這裡重新設置Content-Type欄位
    let newData = '';
    for (let k in data) {
      if (data.hasOwnProperty(k) === true) {
        newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
      }
    }
    return newData;
  }]
});

六、axios設置請求超時時間

在使用axios發送請求時，可能會遇到請求超時導致請求失敗的問題。我們可以通過在{‘ ‘}config{‘ ‘}中設置{‘ ‘}timeout{‘ ‘}參數來設置請求超時時間。

例如，下面的代碼設置請求超時時間為5000毫秒：{‘ ‘}

axios.get(url, {
  timeout: 5000
})

七、axios設置介面永不超時

在某些場景下，需要設置介面永不超時，這時可以通過設置{‘ ‘}timeout: 0{‘ ‘}來實現，表示請求永不超時。

然而，在實際生產中，一些介面可能會存在潛在的問題，如果請求一直不結束，會導致瀏覽器一直等待並且無法進行其他請求。因此，建議在使用{‘ ‘}timeout: 0{‘ ‘}前，先確認介面是否存在問題。

axios.get(url, {
  timeout: 0
})

以上就是關於axios設置header的詳細介紹，包括如何跨域設置header、如何設置固定的headers、如何解決跨域問題、如何解決設置header無效和不生效的問題、如何設置請求超時時間以及如何設置介面永不超時等方面。希望對讀者有所幫助。