问题描述

前端请求后，后端接收到的参数多了1个=。
前端传输参数（this.c_param）： 12138
后端接收参数（c_param）： 12138=

原因分析

后端接收 context-type：application/json。
前端axios的POST请求默认 context-type：application/x-www-form-urlencoded。
因此双方的格式不同！
前端axios的POST请求默认是以键值对形式传递，前端内容是存储在key中，value为空。
后端获取数据的时候，value为空，内容就变成了key=。

application/json

JSON格式提交的一种识别方式。在请求头里标示。
以JSON字符串的格式请求。

application/x-www-form-urlencoded

form表单提交的时候的表示方式。
浏览器默认请求，数据是jquery的Ajax请求的默认方式。
这种方式的好处是浏览器都支持，在请求过程中会对数据进行序列化，以键值对的形式key1=value1&key2=value2。

解决方案

修改 context-type 类型

因为双方的context-type不同导致的，让前端声明context-type类型与后端相同即可。

1
2
3
4
5
6
7
8
9
10
function test(id) {
  return {
    url: '/demo/interface',
    type: 'post',
    params: id,
    headers:{
      'content-type': 'application/json'
    }
  }
}

修改 axios 传参方式

因为使用axios的data进行传值，导致多出“=”。可以选择在请求中传值。

1
2
3
4
5
6
function test() {
  return {
    url: `/demo/interface/${id}`,
    type: 'post',
  }
}
1
2
3
4
5
@CrossOrigin
@PostMapping("DemoMethod")
public String DemoMethod(@RequestBody String c_param){
      System.out.println(c_param);
}

修改 axios 配置

axios请求拦截器

1
config.headers = { 'Content-Type':'application/json' }