fetch 函數中的 headers 標頭解析｜Javascript
更新日期： 2024 年 11 月 19 日
在 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） | 請求內容 |
結論
這兩個標頭是用在不同方向的溝通：
Accept：我要什麼格式的回應。Content-Type：我送來的內容是什麼格式。
你需要視情況設定這些標頭，例如：
- 如果是
GET請求，通常只需要Accept。 - 如果是
POST或PUT請求，通常需要同時設定Accept和Content-Type。