深度探讨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是非常重要的。