### 解决方案 为了使前端能够以 `application/json` 格式提交数据并适配后端的 POST 接口，可以采取以下方法： #### 修改前端代码 如果当前前端使用的是表单（form）或者 AJAX 请求，默认情况下会以 `application/x-www-form-urlencoded` 或者 `multipart/form-data` 提交数据。可以通过调整 JavaScript 代码来实现 JSON 数据的提交。 以下是基于原生 JavaScript 和 Axios 库的两种解决方案： --- #### 原生 Fetch API 实现 通过设置请求头中的 `Content-Type` 为 `application/json` 并将数据序列化为 JSON 字符串，可以满足后端的要求。 ```javascript fetch('http://your-backend-url/api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: "test", sub: [1, 2, 3] }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 此代码片段设置了请求头，并将对象 `{title: "test", sub: [1, 2, 3]}` 转换为 JSON 字符串作为请求体的一部分[^3]。 --- #### 使用 Axios 库实现 Axios 是一个流行的 HTTP 客户端库，它简化了与服务器交互的过程。同样需要显式指定 `Content-Type` 为 `application/json`。 ```javascript const axios = require('axios'); axios.post('http://your-backend-url/api', { title: "test", sub: [1, 2, 3] }, { headers: { 'Content-Type': 'application/json' } }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); ``` 在此示例中，Axios 自动处理了 JSON 的字符串化过程，因此无需手动调用 `JSON.stringify()` 函数[^3]。 --- #### 后端兼容性配置 尽管前端已经更改了提交方式，但仍需确认后端是否能正确解析 `application/json` 类型的数据。通常，在 Spring Boot 中，可以通过 `@RequestBody` 注解接收 JSON 数据。 例如： ```java @RestController @RequestMapping("/api") public class MyController { @PostMapping(consumes = "application/json") public ResponseEntity<String> handleJson(@RequestBody Map<String, Object> jsonData) { System.out.println(jsonData); // 打印接收到的 JSON 数据 return ResponseEntity.ok("Success"); } } ``` 上述代码定义了一个仅接受 `application/json` 内容类型的接口，并利用 `@RequestBody` 来绑定请求体中的 JSON 数据到参数 `jsonData` 上[^1]。 需要注意的是，当后端期望其他类型的内容（如 `application/x-www-form-urlencoded`），而实际传入的是 JSON，则可能导致参数无法正常映射的情况发生[^2]。 --- ### 注意事项 - 如果项目中有多个地方涉及类似的转换操作，建议统一封装成工具函数或服务类。 - 验证输入的有效性和安全性非常重要，尤其是在处理来自外部系统的数据时。应考虑加入必要的校验逻辑以及防止恶意脚本注入等问题的发生[^4]。