深度探討axios中的Content-Type

在前端開發中，我們經常需要向後端發送HTTP請求並處理後端返回的數據。而axios是一個既簡單易用又功能強大的HTTP請求庫，Axios支持多種 Content-Type 類型，包括 application/json、application/x-www-form-urlencoded 等，本文將從多個方面詳細闡述Axios中的Content-Type。

一、Content-Type簡介

Content-Type 是 HTTP 請求頭部的一部分，用於指定請求或響應實體的媒體類型。

// 請求頭中的 Content-Type
Content-Type: application/json

// 響應頭中的 Content-Type
Content-Type: text/html;charset=UTF-8

HTTP 協議和 MIME 類型規定了一系列標準的媒體類型和子類型，具體的 Content-Type 在HTTP請求頭或響應頭中，用來描述請求體媒體類型和響應體媒體類型。

二、默認Content-Type

axios 在默認情況下使用的 Content-Type 是 application/json;charset=utf-8 。

// 使用axios發送POST請求
axios.post('/api/user', {
  name: 'example'
}).then(function (response) {
  console.log(response);
})
// 發送請求頭為以下內容
Content-Type: application/json;charset=utf-8

可以看到，在axios未指定 Content-Type 類型時，默認使用 application/json;charset=utf-8 。

三、Content-Type與請求體的對應關係

根據 HTTP 請求的方法和不同的請求體格式，對 Content-Type 的類型也有不同的規定。

1. application/json

當使用 application/json 類型是，請求體應該被 JSON.stringify 序列化為字元串。

// 發送POST請求，並指定Content-Type為application/json
axios({
  method: 'post',
  url: '/user',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {
    'Content-Type': 'application/json'
  }
});

// 發送請求頭為以下內容
Content-Type: application/json;charset=utf-8
// 請求體為以下內容
{"firstName":"Fred","lastName":"Flintstone"}

2. application/x-www-form-urlencoded

當使用 application/x-www-form-urlencoded 類型時，請求體應該以 name1=value1&name2=value2 的方式進行編碼。

// 發送POST請求，並指定Content-Type為application/x-www-form-urlencoded
axios({
  method: 'post',
  url: '/user',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

// 發送請求頭為以下內容
Content-Type: application/x-www-form-urlencoded;charset=utf-8
// 請求體為以下內容
firstName=Fred&lastName=Flintstone

3. multipart/form-data

當使用 multipart/form-data 時，請求體應該是一個包含二進位數據的 multipart/form-data 表單。這種方式比較適合文件上傳等場景。

// 發送POST請求，並指定Content-Type為multipart/form-data
var formData = new FormData();
formData.append('avatar', file);

axios.post('/user', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

// 發送請求頭為以下內容
Content-Type: multipart/form-data;charset=utf-8; boundary=----WebKitFormBoundaryE19zNvXGzXaLvS5C
// 請求體為以下內容
------WebKitFormBoundaryE19zNvXGzXaLvS5C
Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"
Content-Type: image/jpeg

����JFIF��H�H�������FExifMM*���(�������(����(��2��i��i���Adobe d�    ���&��Photoshop 3.0 8BIM������8BIM%��x???'$��4�%G  ���S�Adobed���     �� "��� �� �}!1AQa"q2���#B��R��$3br�
...
------WebKitFormBoundaryE19zNvXGzXaLvS5C--

四、Content-Type與響應體的對應關係

同樣的，響應頭的 Content-Type 欄位可以反映出響應體的媒體類型和編碼格式。axios 默認會將響應體當做 JSON 解析，自動將響應體轉換成 JavaScript 對象或數組。但是，除了 JSON 類型外，還有其他媒體類型。

1. application/json

當返回的數據是 JSON 格式時，axios 會自動解析為 JavaScript 對象，方便開發人員處理數據。

// 獲取JSON格式數據
axios.get('/api/data').then(function (response) {
  console.log(response.data);
})

// 返回JSON格式數據
Content-Type: application/json;charset=utf-8
// 響應體為以下內容
{
  "name": "example",
  "age": 18
}

2. text/plain

當返回的數據是純文本時，axios 會使用 utf-8 編碼的字元串返迴響應體數據。

// 獲取純文本數據
axios.get('/api/text').then(function (response) {
  console.log(response.data);
})

// 返回純文本格式數據
Content-Type: text/plain;charset=utf-8
// 響應體為以下內容
hello world

3. application/octet-stream

當返回的數據是流數據時，axios 會將其作為二進位數據進行處理，需要開發人員自己進行處理。

// 獲取流數據
axios.get('/api/stream', {responseType: 'stream'}).then(function (response) {
  console.log(response.data);
})

// 返迴流格式數據
Content-Type: application/octet-stream;charset=utf-8
// 響應體為以下內容
���

五、Content-Type的其他應用場景

通過設置 Content-Type 來使前端對請求和響應進行更精細控制，下面的案例中每個操作的目標不同，卻都是通過設置 Content-Type 實現的。

1. 下載文件

有時我們需要將一個字元串或二進位數據轉換為文件下載到本地，可以通過設置 Content-Type 為 application/octet-stream，在瀏覽器中自動觸發下載操作。

// 下載文件
axios.get('/api/download', {
  responseType: 'arraybuffer',
  headers: {
    'Content-Type': 'application/octet-stream'
  }
}).then(function (response) {
  const blobData = new Blob([response.data]);
  const downloadUrl = URL.createObjectURL(blobData);
  const anchor = document.createElement('a');
  anchor.href = downloadUrl;
  anchor.download = 'example.txt';
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
});

// 返迴流格式數據
Content-Type: application/octet-stream;charset=utf-8
// 響應體為文件內容
example content

2. Base64編碼

在使用一些服務端API時，需要將數據編碼成base64格式，並設置Content-Type為application/octet-stream，並將返回值的data欄位解析成base64字元串。

// 將文本轉換為Base64編碼
axios.post('/api/encode', {
  data: 'hello world'
}, {
  headers: {
    'Content-Type': 'application/octet-stream'
  }
}).then(function (response) {
  console.log(response.data);
});

// 返迴流格式數據
Content-Type: application/octet-stream;charset=utf-8
// 響應體為以下內容
aGVsbG8gd29ybGQ=

3. 上傳圖片

為了能夠處理文件上傳，我們需要將表單中的二進位數據作為multipart/form-data類型的請求發送到服務端。此時需要設置Content-Type為multipart/form-data，並使用FormData對象進行表單數據的封裝。

// 上傳圖片
const formData = new FormData();
formData.append('image', file);

axios.post('/api/image', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(function (response) {
  console.log(response.data);
});

// 發送請求頭為以下內容
Content-Type: multipart/form-data;charset=utf-8; boundary=----WebKitFormBoundaryE19zNvXGzXaLvS5C
// 請求體為以下內容
------WebKitFormBoundaryE19zNvXGzXaLvS5C
Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"
Content-Type: image/jpeg

����JFIF��H�H�������FExifMM*���(�������(����(��2��i��i���Adobe d�    ���&��Photoshop 3.0 8BIM������8BIM%��x???'$��4�%G  ���S�Adobed���     �� "��� �� �}!1AQa"q2���#B��R��$3br�
...
------WebKitFormBoundaryE19zNvXGzXaLvS5C--

六、總結

本文詳細闡述了Axios中的Content-Type，在使用axios發送請求時，需要根據不同的請求類型和場景，設置不同的Content-Type來使得請求和響應達到更精細的控制。同時，axios的默認值為application/json;charset=utf-8，當我們需要使用其他類型時，需要手動設置Content-Type欄位。通過前面的案例可以看出，在客戶端和服務端進行數據交互時設置Content-Type是非常重要的。