axios配置请求头content-type浅谈

背景

在我们日常开发中，有时会碰到前端接口请求了，浏览器开发者工具上也显示参数传过去了，可后端同学却拿不到传过去的数据。可能原因是，我们请求的数据格式与后端同学所定义的接收数据格式不一致而导致的。

1.请求常见的数据格式（content-type）

1. Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端(默认的数据格式)
2. Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
3. Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

a. Content-Type: application/json

告诉服务端消息主体是序列化后的 JSON 字符串，asios默认的请求数据格式为’application/json’

let params = {'title':'test', 'sub' : [1,2,3]}
axios({
    method: 'post',
    url: '/api/lockServer/search',
    params
})

最终发送的请求是 
{"title":"test","sub":[1,2,3]}

b.Content-Type: application/x-www-form-urlencoded

默认情况下，axios将JavaScript对象序列化为JSON。要以application/x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

1. 你可以使用URLSearchParams API,可以不用去设置Content-Type: application/x-www-form-urlencoded

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

2. 您可以使用qs库编码数据,引入 qs ，这个库是 axios 里面包含的，不需要再下载了

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

c.Content-Type: multipart/form-data

一般文件上传都是通过该数据格式提交的，例如图片上传

import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

2.axios的content-type是自动设置的吗？

在 data 是 内置对象的时候会进行一些自动设置，当 data 是 FormData 时自动设置（严格来说是强制删除）content-type 的值，让浏览器自己设置。当 data 为 URLSearchParams 对象时设置为 application/x-www-form-urlencoded;charset=utf-8, 当 data 为普通对象时，会被设置为 application/json;charset=utf-8，当你在之前已经设置了Content-Type这里是不会自动设置的。