项目场景

框架：使用 SpringBoot + Vue框架，前端传值引用axios。

在前端vue文件中，使用axios进行传值（Post请求）,传值格式如下。

axios({
	method: 'POST',
	   url: 'Demo/DemoMethod',// 假设请求为Demo，不写端口了。
	  data: this.c_param // 本次传输的参数
})

在后端的Controller层中，接收请求的方法如下。

@CrossOrigin
@PostMapping("DemoMethod")
     public String DemoMethod(@RequestBody String c_param){
         System.out.println(c_param);
     }

问题描述

根据以上的场景，前端请求后，后端接收到的参数多了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。

解决方案：5种

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

基于上方的发生场景进行修改，修改位置axios前端发送请求处。 （可以对照着查看哪里修改）

axios({
	   method: 'POST',
	   url: 'Demo/DemoMethod',
	   contentType: 'application/json', // 声明本次请求的数据类型
	   data:this.c_param 
})

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

基于上方的发生场景进行修改，修改位置后端接收请求处、前端请求处。 （可以对照着查看哪里修改）

axios({
	   method: 'POST',
	   url: 'Demo/DemoMethod/' + this.c_param,
})
@CrossOrigin
@PostMapping("DemoMethod/{c_param}")
     public String DemoMethod(@RequestBody @PathVariable("c_param") String c_param){
         System.out.println(c_param);
     }

方案三：既然是接收到的参数出问题，可以直接对参数进行下手，“=”一定是在最后的。

基于上方的发生场景进行修改，修改位置后端接收请求处。 （可以对照着查看哪里修改）

@CrossOrigin
@PostMapping("DemoMethod")
     public String DemoMethod(@RequestBody String c_param){
     	 StringBuffer buffer = new StringBuffer(c_param);
     	//public StringBuffer deleteCharAt(int index):删除指定位置的字符，并返回本身
     	 buffer.deleteCharAt(c_param.length() - 1);//删除最后位的元素
     	 String param = buffer.toString();
         System.out.println(param);
     }

方案四：既然使用axios，可以在配置中修改headers，让其默认请求数据类型是JSON。

基于上方的发生场景进行修改，修改位置axios配置文件处（一般位置src/plugins/axios.js）。 （将下方代码添加即可）

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

方案五：这里在前端发起请求前，在请求拦截器中设置一下context-type为json就好了（待完善）