### **问题解构** * **核心问题**：前端使用 `FormData` 对象封装 JSON 数据后发起 POST 请求，后端接收到数据时出现中文乱码。 * **根本原因**：请求的 **`Content-Type`** 头部设置与数据编码方式不匹配，导致服务器端无法正确解码。当 `Content-Type` 为 `multipart/form-data` 时，其字符集（charset）的指定方式与 `application/x-www-form-urlencoded` 或 `application/json` 不同，若未正确处理，极易引发乱码 [ref_1][ref_3][ref_5]。 * **解决方案推演**：解决乱码问题需从前端请求配置和后端接收处理两个环节协同入手，确保字符编码（通常为 UTF-8）的一致性。 ### **方案推演与具体实现** 乱码问题的核心在于**编码一致性**。下表对比了两种常见的前端数据传递方式及其对应的后端处理要点： | 特性维度 | `application/x-www-form-urlencoded` (传统表单) | `multipart/form-data` (FormData，常用于文件上传) | | :--- | :--- | :--- | | **Content-Type** | `application/x-www-form-urlencoded;charset=UTF-8` | `multipart/form-data; boundary=----WebKitFormBoundaryxxx` | | **数据格式** | 键值对，`key1=value1&key2=value2`，URL编码 | 每个字段（包括文件）作为独立部分（part），有各自的头部和内容 | | **编码指定** | 在 `Content-Type` 中直接通过 `charset` 参数指定 | **每个文本字段的 `Content-Type` 头部中单独指定**，例如 `Content-Type: text/plain; charset=UTF-8` | | **前端常见库** | Axios（默认）、jQuery.ajax | Axios、原生 `fetch` 或 `XMLHttpRequest` | | **后端接收** | `request.getParameter()` (Servlet) 或 `@RequestParam` (Spring) | 需使用能解析多部分请求的组件，如 `MultipartFile`、`@RequestPart` (Spring) 或解析原始请求体 | **关键结论**：使用 `FormData` (`multipart/form-data`) 传递纯 JSON 文本并非最佳实践，因为其设计初衷是混合传输文本和二进制文件。若坚持使用，必须确保每个文本部分的编码被正确声明。 #### **方案一：前端规范请求（推荐）** **1. 使用 `URLSearchParams` 或 `qs` 库（适用于 `x-www-form-urlencoded`）** 如果后端期望接收 `application/x-www-form-urlencoded` 格式，应将 JSON 对象转换为查询字符串格式。 ```javascript import axios from 'axios'; import qs from 'qs'; // 需要安装 qs 库 const jsonData = { name: "张三", info: { age: 30 } }; axios.post('/api/endpoint', qs.stringify(jsonData), { headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' // 明确指定编码 } }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` * **说明**：`qs.stringify` 将对象转换为 `key=value&...` 格式，并设置正确的 `Content-Type` 和 `charset`，这是解决乱码的通用方法 [ref_2]。 * **后端对应接收**：在 Spring MVC 中，可使用 `@RequestParam` 接收单个参数，或使用 `@ModelAttribute` 绑定到对象。同时，需确保服务器容器（如 Tomcat）的 `URIEncoding` 和请求体编码过滤器已设置为 UTF-8 [ref_5]。 **2. 直接发送 `application/json`（最简洁）** 如果后端支持，直接发送 JSON 字符串是最清晰的方式，无需处理表单编码问题。 ```javascript import axios from 'axios'; const jsonData = { name: "张三", info: { age: 30 } }; axios.post('/api/endpoint', jsonData, { // Axios 会自动序列化对象为 JSON 字符串 headers: { 'Content-Type': 'application/json;charset=UTF-8' // 明确指定编码 } }).then(response => { console.log(response.data); }); ``` * **说明**：这种方式将数据放在请求体（Request Payload）中，字符集在 `Content-Type` 中统一指定，能有效避免乱码 [ref_1][ref_4]。 * **后端对应接收**：在 Spring MVC 中，使用 `@RequestBody` 注解来接收，并配合 `@RestController` 或 `@ResponseBody`。 **3. 正确使用 `FormData` 传递文本（当必须混合文件上传时）** 如果请求中必须包含文件，因而不得不使用 `FormData`，则需要为文本字段附加正确的编码信息。 ```javascript // 假设我们有一个 JSON 字符串需要作为 FormData 的一个字段发送 const formData = new FormData(); const jsonString = JSON.stringify({ name: "张三", age: 30 }); // 方法A：直接追加，但可能缺失编码信息（不推荐，易乱码） formData.append('jsonField', jsonString); // 方法B：创建一个指定编码的 Blob（推荐，明确编码） const jsonBlob = new Blob([jsonString], { type: 'application/json;charset=UTF-8' }); formData.append('jsonField', jsonBlob); // 或者指定为纯文本但带编码 const textBlob = new Blob([jsonString], { type: 'text/plain;charset=UTF-8' }); formData.append('jsonField', textBlob); axios.post('/api/upload', formData); // Content-Type 会被自动设置为 multipart/form-data ``` * **说明**：通过 `Blob` 构造函数，可以显式地为 `FormData` 中的某个字段部分设置 `Content-Type` 和 `charset`，这能指导后端如何解码该部分的数据 [ref_6]。 #### **方案二：后端统一解码处理** 无论前端如何发送，后端都应设置统一的 UTF-8 解码过滤器或配置，这是防御乱码的最后一道屏障。 **1. Spring Boot / Spring MVC 配置** 在 `application.properties` 或 `application.yml` 中配置： ```yaml # application.yml spring: http: encoding: charset: UTF-8 enabled: true force: true # 强制请求和响应使用 UTF-8 ``` 或通过配置类添加过滤器： ```java import org.springframework.boot.web.servlet.FilterRegistrationBean; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.filter.CharacterEncodingFilter; @Configuration public class CharsetConfig { @Bean public FilterRegistrationBean<CharacterEncodingFilter> characterEncodingFilter() { FilterRegistrationBean<CharacterEncodingFilter> filterRegBean = new FilterRegistrationBean<>(); CharacterEncodingFilter filter = new CharacterEncodingFilter(); filter.setEncoding("UTF-8"); filter.setForceEncoding(true); // 强制使用 UTF-8 filterRegBean.setFilter(filter); filterRegBean.addUrlPatterns("/*"); return filterRegBean; } } ``` **2. 针对 `multipart/form-data` 请求的特殊处理** 当使用 `FormData` 且包含文件时，Spring 的 `MultipartResolver` 需要正确配置以处理文本部分的编码。 ```java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.multipart.MultipartResolver; import org.springframework.web.multipart.support.StandardServletMultipartResolver; import javax.servlet.MultipartConfigElement; @Configuration public class MultipartConfig { // 对于 Spring Boot 2.x+ 使用 Servlet 3.0+ 标准，编码通常在请求解析层面处理。 // 确保你的 servlet 容器（如 Tomcat）的 server.tomcat.uri-encoding=UTF-8 已设置。 // 对于文本部分，其编码应由其 part 自身的 Content-Type 头决定，如前端方案三所示。 } ``` 对于 Tornado 等框架，后端需要从 `multipart/form-data` 的每个部分中读取头部信息以确定编码 [ref_4]。 ### **总结与最佳实践建议** 1. **首选 `application/json`**：对于纯 JSON 数据交换，这是最标准、问题最少的方式。前端设置 `Content-Type: application/json;charset=UTF-8`，后端使用 `@RequestBody` 接收 [ref_1][ref_5]。 2. **慎用 `FormData` 传纯 JSON**：`FormData` 主要用于**文件上传或混合提交文件与简单文本**。如果仅传 JSON，使用它会让问题复杂化。 3. **编码声明必须明确**：无论是前端设置请求头，还是后端解析数据，**UTF-8** 应作为统一的字符编码标准。前端在 `Content-Type` 中声明，后端通过过滤器或框架配置强制使用。 4. **前后端联调工具**：使用 Postman 或 Apifox 等工具模拟请求，对比成功和失败请求的 **原始请求头（Raw Headers）** 和 **请求体格式**，能快速定位是前端发送问题还是后端解析问题。重点检查 `Content-Type` 头是否包含 `charset=UTF-8`，以及请求体的实际编码。 遵循以上规范，即可从根本上解决 `FormData` 传递 JSON 数据导致的后端接收乱码问题。