Logo

新人日誌

首頁關於我部落格

新人日誌

Logo

網站會不定期發佈技術筆記、職場心得相關的內容,歡迎關注本站!

網站
首頁關於我部落格
部落格
分類系列文

© 新人日誌. All rights reserved. 2020-present.

fetch 函數中的 headers 標頭解析|Javascript

最後更新:2024年11月19日JavaScript

在 fetch 的 headers 設定中:

headers: {
    Accept: 'application/json',
    'Content-type': 'application/json'
}

這兩個標頭 (Accept 和 Content-type) 看似相似,但它們的用途和含義其實不同:


Accept

  • 用途:告訴伺服器,客戶端希望接收到的回應格式是什麼。
  • 例子:
    • 'application/json': 客戶端希望伺服器回傳 JSON 格式的資料。
    • 'text/html': 客戶端希望接收到 HTML。
  • 伺服器行為:伺服器會根據 Accept 標頭提供相應的格式(如果伺服器支援多種格式)。

    舉例:如果請求中有 Accept: application/json,伺服器通常會回傳類似這樣的內容:
  { "message": "Hello World" }

如果是 Accept: text/html,則可能回傳:

  <html><body>Hello World</body></html>

Content-Type

  • 用途:告訴伺服器,客戶端傳送的請求正文的格式是什麼。
  • 例子:
    • 'application/json': 請求的正文(body)是 JSON 格式。
    • 'application/x-www-form-urlencoded': 傳送的是表單格式。
  • 伺服器行為:伺服器會根據這個標頭解析請求的 body。

    舉例:
    如果請求有:
  {
    "username": "test",
    "password": "12345"
  }

那麼 Content-Type: application/json 告訴伺服器這是 JSON,伺服器應該用 JSON 解碼來處理。


簡單比較

標頭說明面向對象
Accept希望伺服器回應的格式(如 JSON)伺服器回應
Content-Type告訴伺服器請求的 body 是什麼格式(如 JSON)請求內容
說明希望伺服器回應的格式(如 JSON)
面向對象伺服器回應
說明告訴伺服器請求的 body 是什麼格式(如 JSON)
面向對象請求內容

結論

這兩個標頭是用在不同方向的溝通:

  • Accept:我要什麼格式的回應。
  • Content-Type:我送來的內容是什麼格式。

你需要視情況設定這些標頭,例如:

  • 如果是 GET 請求,通常只需要 Accept。
  • 如果是 POST 或 PUT 請求,通常需要同時設定 Accept 和 Content-Type。
目前還沒有留言,成為第一個留言的人吧!

發表留言

留言將在審核後顯示。

JavaScript

目錄

  • Accept
  • Content-Type
  • 簡單比較
  • 結論