axios设置请求头 Content-Type 数据提交格式

1.请求常见的数据格式（content-type）
Content-Type: application/json ：请求体中的数据会以json字符串的形式发送到后端(默认的数据格式)
Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
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这里是不会自动设置的。
————————————————
版权声明：本文为CSDN博主「flym_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014689760/article/details/111502067

axios设置请求头 Content-Type 数据提交格式

推荐阅读更多精彩内容