axios传递参数与后端接收Content-type对应关系

axios传递参数与后端接收Content-type对应关系

前端传递参数种类

get

只能传递query参数，如param

query的参数都是拼接在url地址上的。

可以传递，基本类型，对象，数组，集合

这种情况后端直接，一一对应的接受即可。

集合的接收：

1. 需要重新创建一个对象，对象里面放一个list集合才能接收成功
2. 或者axios将list集合转化为json格式，后端使用@RequestBody接收json格式也行。

post

post可以传递body和query两种形式参数。

post提交的content-type有三种格式

1. Content-Type: application/json
2. Content-Type: application/x-www-form-urlencoded
3. Content-Type: multipart/form-data

后端接受参数类型

@RequestParam

若后端使用了@RequestParam接受前端传递的参数，

则前端必须传递一个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);

@RequestBody

若后端使用@RequestBody 来接收前端传过来的参数的，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]}

文件类型上传

包括图片上传

Content-Type: multipart/form-data

实现步骤：

参考文章：

前端post请求中body和query传参的区别_前端post请求参数放body-CSDN博客

axios配置请求头content-type浅谈_axios 带请求头-CSDN博客