Axios请求头Content-type配置

2,686 阅读1分钟

请求常见的数据格式:

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

Content-Type:application/json

告诉服务端消息是序列化之后的JSON字符串,axios默认的就是'application/json'

let params = {title:'aa',content:'ssssssss'}
axios({
    method:'post',
    url:'/api/url',
    data:JSON.stringify(params)
    })
 最终发送的是:'{"title":"aa","content":"ssssssss"}'

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

要以application/x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。

1.你可以使用URLSearchParams API,可以不用去设置Content-Type: application/x-www-form-urlencoded。(URLSearchParams 不支持所有的浏览器,但是总体的支持情况还是 OK 的)

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);

Content-Type: multipart/form-data

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

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

原文链接:blog.csdn.net/u014689760/…