axios发送的参数后端接收不到

1 后端接收不到的原因

axios发送参数后端接收不到的原因是发送请求的数据格式不对（排除错误的情况），前端发送数据时Content-Type有两种方式，一种是'Content-Type':'application/json;charset=utf-8'，另一种是'Content-Type': 'application/x-www-form-urlencoded'。axios的post/get方法默认使用的是'Content-Type':'application/json;charset=utf-8'，即json方式，后端只能使用json方式（Flask：get_json()、SpringMVC：@RequestBody ）接收，如果以其他方式接收是无法接收的。

 

2 解决方法

2.1 前端修改

前端向后端看齐，如果后端是form方式接收，前端可以使用如下2种方式：
（1）使用qs序列化参数
let param = qs.stringify({ id:1 }); 
axios.post('/api', param).then(res=>{ 
    console.log(res.data) 
}); 
（2）使用URLSearchParams
注意：URLSearchParams和FormData()是不同的，使用FormData()还需要添加{headers:{'Content-Type': 'multipart/form-data'}}
let param = new URLSearchParams(); 
param.append("id", 1); 
axios.post('/api', param).then(res=>{ 
    console.log(res.data) 
});

2.2 后端修改

与后端开发人员协商，让后端更改为与前端一致的数据方式；

3 后端接收数据的方式

3.1 flask数据接收

Flask接收数据常用的有5种方式，参数（args）、表单（form）、值（values）、文件（files）、json（get_json）、
def args(): 
    # 获得URL中的参数，返回值字典 
    # data = request.args.get('id') 
    data = request.args['id'] 
     
def form(): 
    # 获得form表单中的参数，返回值字典 
    # data = request.form.get('id') 
    data = request.form['id'] 
     
def values(): 
    # 获得URL和from中的所有参数，返回值字典 
    # data = request.form.get('id') 
    data = request.form['id'] 
     
def file(): 
    # 获取file文件数据，返回值字典 
    # data = request.files.get('file') 
    data = request.files['file'] 
     
def json(): 
    # 获取json数据，返回值字典 
    data = request.get_json()

 

3.2 SpringMVC数据接收

SpringMVC中接收参数的方式，有不使用注解的方式，控制器的参数名和HTTP请求参数名称一致；使用注解方式的有3种方式，表单（@RequestParam）、URL（@PathVariable）、json（@RequestBody)
public void requestParam(@RequestParam("id") int id){ 
    System.out.println(id); 
} 
 
public void pathVariable(@PathVariable("id") int id){ 
    System.out.println(id); 
} 
 
public void json(@RequestBody Object id){ 
    System.out.println(id); 
}