HTTP 請求頭是客戶端與服務(wù)器通信時交換的元數(shù)據(jù)，以鍵值對形式提供附加信息。例如Content-Type 指明發(fā)送數(shù)據(jù)格式，Authorization 用於攜帶身份驗證信息，Accept 表示能接受的響應(yīng)類型。使用JavaScript 的fetch 方法時，可通過headers 選項自定義這些頭信息，如設(shè)置'Content-Type': 'application/json' 和'Authorization': 'Bearer your_token_here'。需要注意標(biāo)準(zhǔn)命名、值為字符串、部分頭不可修改等問題。常見場景包括設(shè)置多個header、動態(tài)生成header 值以及處理CORS 預(yù)檢請求。

HTTP 請求頭（headers）是客戶端和服務(wù)器在通信時交換的元數(shù)據(jù)，它們提供了關(guān)於請求或響應(yīng)的附加信息。比如你用瀏覽器訪問一個網(wǎng)站時，它會自動帶上一些headers，告訴服務(wù)器你是從什麼設(shè)備、用什麼瀏覽器發(fā)起的請求。

如果你用JavaScript 的fetch發(fā)起網(wǎng)絡(luò)請求，也可以自定義這些headers。這在調(diào)用API 或者需要認(rèn)證權(quán)限的接口時非常常見。

什麼是HTTP 請求頭？

HTTP headers 是HTTP 請求和響應(yīng)的一部分，用來傳遞額外的信息。它們通常以鍵值對的形式出現(xiàn)。比如：

• Content-Type ：說明發(fā)送的數(shù)據(jù)是什麼格式（如JSON、表單等）
• Authorization ：攜帶身份驗證信息（如token）
• Accept ：告訴服務(wù)器能接受哪些響應(yīng)類型

這些header 可以由瀏覽器自動添加，也可以手動設(shè)置。有些時候，API 接口要求你必須提供特定的header 才能正常工作。

使用fetch 設(shè)置請求頭的方法

在使用fetch發(fā)起請求時，可以通過headers選項來設(shè)置自定義header?；窘Y(jié)構(gòu)如下：

 fetch(url, {
  method: 'GET', // 或POST 等headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  }
})

注意幾點(diǎn)：

• 鍵名建議使用標(biāo)準(zhǔn)命名，比如Content-Type而不是隨意寫的contentType
• 值要寫成字符串形式，不要傳對像或數(shù)字
• 某些headers 瀏覽器出於安全考慮不允許修改，比如User-Agent

舉個例子，當(dāng)你想發(fā)一個帶JSON 數(shù)據(jù)的POST 請求：

 fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'test' })
})

這樣服務(wù)器就知道你要發(fā)送的是JSON 格式的數(shù)據(jù)了。

常見場景與註意事項

需要設(shè)置多個header 的情況

有時候你需要加多個header，比如同時指定內(nèi)容類型和認(rèn)證信息：

 headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer abc123',
  'X-Requested-With': 'XMLHttpRequest'
}

這種情況直接按上面的方式寫就行，順序不影響功能。

動態(tài)設(shè)置header

有時候你想根據(jù)當(dāng)前狀態(tài)動態(tài)設(shè)置header，比如用戶登錄後拿到的token：

 const token = localStorage.getItem('token');

fetch('/api/secure', {
  headers: {
    ...(token && { 'Authorization': `Bearer ${token}` }),
    'Content-Type': 'application/json'
  }
});

這樣可以避免未登錄時還帶上空的Authorization 頭。

CORS 場景下可能的問題

如果你在前端設(shè)置了自定義header，比如Authorization或Content-Type以外的字段，瀏覽器可能會先發(fā)出一個OPTIONS預(yù)檢請求（preflight）。這時候後端必須正確響應(yīng)這個請求，否則會被瀏覽器攔截。

解決方法：

• 後端配置好允許的headers 和methods
• 避免設(shè)置不必要的header，尤其是非標(biāo)準(zhǔn)字段

基本上就這些。設(shè)置header 其實(shí)不復(fù)雜，但細(xì)節(jié)容易忽略，尤其是在跨域或者需要認(rèn)證的時候。

以上是什麼是HTTP請求標(biāo)頭以及如何通過獲取設(shè)置？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！