简单聊一聊axios配置请求头content-type

当使用axios发送HTTP请求时，你可以在请求中添加headers头部来指定Content-Type类型。默认情况下，Content-Type类型为application/json。这意味着在发送axios请求时，如果我们的请求需要使用不同的Content-Type设置，我们需要进行额外的配置。

下面是一份通用的axios请求配置，可以让我们设置请求头的Content-Type类型：

import axios from 'axios';

const api = axios.create({
 headers: {
   'Content-Type': 'application/x-www-form-urlencoded',
 },
});

export default api;

在上述代码中，我们创建了一个带有headers选项的axios实例，并在其中指定了Content-Type应该为application/x-www-form-urlencoded。这个Content-Type适用于大多数Web表单。

在接下来的示例中，我们将看到如何使用上述代码与axios一起工作。

示例1：将Content-Type设置为application/json

上述示例中我们默认情况下的Content-Type类型为application/json。但是，有时我们需要将Content-Type的类型更改为其他类型，比如原始文本(text/plain)或表单数据(multipart/form-data)。

例如，假设我们正在向API发送一个原始文本请求，那么我们需要将Content-Type设置为text/plain。我们可以在我们的axios请求中包含一个headers中的Content-Type字段来实现这一点，如下所示：

const data = "hello world";

await axios.post('/api/text', data, {
  headers: {
    'Content-Type': 'text/plain',
  },
});

示例2：发送包含图片的表单数据

假设我们需要向API发送一个包含图片的表单。那么，我们可以将Content-Type设置为multipart/form-data。在这种情况下，我们将使用FormData对象来处理我们的数据，并将其作为请求的body发送。

const file = document.querySelector('input[type="file"]').files[0];
const formData = new FormData();
formData.append('file', file);

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

在上述示例中，我们首先获取我们要上传的文件，然后创建一个新的formData对象。我们将上传文件添加到formData对象中，然后使用axios发送请求并将Content-Type设置为multipart/form-data。

以上是关于如何配置axios请求头Content-Type的完整攻略，希望对您有所帮助。