Vue.js向SpringBoot传递字符串时接收值为Null的问题排查

问题原因 #

1. 请求体格式不匹配：前端通过Axios发送的是JSON对象（{myString: this.myString}），但后端用@RequestBody String直接接收时，Spring无法将JSON对象解析为单一字符串，导致接收值为null。
2. 请求方法不匹配：浏览器地址栏直接访问接口会发送GET请求，而后端接口通过@PostMapping限定仅支持POST方法，因此返回405错误，这是预期行为——测试POST接口需用Postman、Axios等工具发送POST请求。

解决方法 #

方法一：前端直接传递字符串（推荐，适合仅传单个字符串的场景） #

修改Vue的Axios请求，直接传递字符串作为请求体，并设置Content-Type为text/plain：

sendString() {
  axios.post('/apii/send-string', this.myString, {
    headers: {
      'Content-Type': 'text/plain'
    }
  })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
},

后端代码无需修改，即可正常接收字符串。

方法二：后端用实体类接收（适合传递多个参数的场景） #

如果前端需要保持JSON对象传递，后端可定义实体类来接收参数：

// 定义接收实体类
public class StringRequest {
    private String myString;

    // 必须包含无参构造器
    public StringRequest() {}

    // Getter和Setter方法
    public String getMyString() {
        return myString;
    }

    public void setMyString(String myString) {
        this.myString = myString;
    }
}

修改控制器方法：

@PostMapping("/send-string")
public ResponseEntity<String> receiveString(@RequestBody StringRequest request) {
    System.out.println("Le message recu : " + request.getMyString());
    return ResponseEntity.ok("String reçu avec succès !");
}

前端代码无需修改，即可正确获取参数值。

方法三：使用@RequestParam接收表单格式参数 #

如果改为表单形式传递参数，前端使用URLSearchParams构建请求体：

sendString() {
  const params = new URLSearchParams();
  params.append('myString', this.myString);
  axios.post('/apii/send-string', params)
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
},

后端修改为用@RequestParam接收：

@PostMapping("/send-string")
public ResponseEntity<String> receiveString(@RequestParam String myString) {
    System.out.println("Le message recu : " + myString);
    return ResponseEntity.ok("String reçu avec succès !");
}

内容的提问来源于stack exchange，提问作者Mass Mak