Vue + Spring Boot 前后端交互实践：正确使用 `Content-Type: application/json` 及参数传递方式

菜鸡上道

于 2025-06-17 23:08:47 发布

阅读量925

点赞数 23

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_45688811/article/details/148725740

在前后端分离开发中，前端通过 HTTP 请求与后端进行数据交互是常见的操作。其中，Content-Type 是决定请求体格式的重要字段之一。本文将以一个具体的例子出发，讲解如何在 Vue 前端 使用 Axios 发送 JSON 格式请求，并在 Spring Boot 后端 正确接收参数。

我们将分析如下代码是否合理：

axios.post('/api/login2', id, {
    headers: {
        'Content-Type': 'application/json'
    }
});

对应的后端接口为：

@PostMapping("/login2")
public ResponseEntity<?> login2(@RequestBody Long id) {
    return ResponseEntity.ok("Received: " + id);
}

一、整体结构是否正确？

模块	是否正确	说明
请求方式	✅	使用 `axios.post` 发送 POST 请求
接口路径	✅	`/api/login2` 路径匹配后端 `@PostMapping("/login2")`
Content-Type 设置	✅	明确设置为 `'application/json'`
后端接收方式	✅	使用 `@RequestBody Long id` 正确接收 JSON 数据

✅ 结论：该写法在语法上是正确的，可以正常工作。

二、详细分析前后端交互过程

1. 前端发送原始值作为请求体（如数字或字符串）

前端传入的是一个原始类型（如 id = 123），Axios 会自动将其序列化为 JSON 字符串发送：

这是合法的 JSON 格式，但不常见。通常我们更倾向于使用对象形式传递参数。

2. 后端接收原始值作为请求体

Spring Boot 支持将 JSON 的原始值绑定到基本类型或包装类，例如：

@RequestBody Long id

如果接收到的数据是：

Spring Boot 会成功将其转换为 Long 类型的变量。

三、潜在问题与建议

虽然上述写法在技术上可行，但在实际项目开发中并不推荐。以下是几个需要注意的问题和改进建议：

1. ❌ 不推荐使用原始值作为请求体

JSON 虽然允许直接传输原始值（如 "123"、true、null），但这不符合 RESTful API 设计规范，也不利于后期维护和扩展。

✅ 更推荐的做法：使用对象形式传递参数

const id = 123;

axios.post('/api/login2', { id });

此时发送的数据为：

{
  "id": 123
}

对应地，后端也应该改为接收一个对象：

public class LoginRequest {
    private Long id;

    // getter and setter
}

@PostMapping("/login2")
public ResponseEntity<?> login2(@RequestBody LoginRequest request) {
    return ResponseEntity.ok("Received ID: " + request.getId());
}

这样不仅结构清晰，也便于未来添加更多字段。

2. ⚠️ 注意类型一致性

如果前端传入的是字符串 '123'，而后端期望的是 Long，可能会抛出类型转换异常。
建议统一使用 String 类型，或者确保数值在 Long 范围内。

3. ✅ Axios 默认已设置 `Content-Type: application/json`

如果你没有手动配置 transformRequest 或其他拦截器，Axios 在发送对象时会默认设置 Content-Type: application/json，因此你可以简化请求为：

axios.post('/api/login2', { id });

除非你想覆盖默认行为（比如上传文件等），否则无需手动设置。

四、最终推荐写法（最佳实践）

🧩 前端 Vue + Axios 示例：

const id = 123;

axios.post('/api/login2', { id })
    .then(response => {
        console.log(response.data); // 输出：Received ID: 123
    })
    .catch(error => {
        console.error('Error:', error);
    });

🧩 后端 Spring Boot 示例：

// DTO 对象
public class LoginRequest {
    private Long id;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }
}

// 控制器
@RestController
public class AuthController {

    @PostMapping("/login2")
    public ResponseEntity<String> login2(@RequestBody LoginRequest request) {
        return ResponseEntity.ok("Received ID: " + request.getId());
    }
}

五、总结对比表

写法	前端示例	后端接收方式	是否推荐
原始值传参	`axios.post(url, 123)`	`@RequestBody Long id`	⚠️ 可行但不推荐
对象传参（推荐）	`axios.post(url, { id })`	`@RequestBody LoginRequest`	✅ 推荐，结构清晰
使用 Map 接收	同上	`@RequestBody Map<String, Object>`	✅ 灵活但类型不安全
使用 @RequestParam	-	`@RequestParam Long id`	❌ 不适用于 JSON 请求体