React 和 Spring Boot 中 Multipart 文件传输的 415 响应：深度解析和解决方案

2024-03-11 10:59:15

使用 React 前端和 Spring Boot 后端解决 415 响应：Multipart 文件传输

摘要

在使用 React 前端和 Spring Boot 后端进行开发时，向后端发送 Multipart 文件可能会遇到 415 响应，表示服务器不支持请求的媒体类型。本文将深入剖析这一问题，并提供详细的解决方案步骤，帮助你顺利传输 Multipart 文件。

问题

当你尝试使用 React 中的 axios 库将图像文件作为 Multipart 文件发送到 Spring Boot 后端时，服务器返回了 415 响应，表示不受支持的媒体类型。

原因

415 响应通常表示服务器不支持客户端发送的媒体类型。在 Multipart 文件传输中，正确的 Content-Type 标头至关重要，错误的标头或缺少边界会导致 415 响应。

解决方案

要解决 415 响应问题，需要确保以下事项：

1. 设置 Content-Type 标头

在 React 中使用 axios 发送 Multipart 请求时，必须手动设置 Content-Type 标头为 "multipart/form-data"。

const formData = new FormData();
formData.append("myImage", selectedImage);

const config = {
  headers: {
    "Content-Type": "multipart/form-data",
  },
};

axios.post("http://localhost:8080/api/image/", formData, config)
  .then((response) => {
    // 处理响应
  })
  .catch((error) => {
    // 处理错误
  });

2. 处理边界

axios 会自动生成边界来分隔 Multipart 请求中的各个部分，因此无需手动添加。

3. 检查 Spring Boot 控制器

Spring Boot 控制器需要正确配置才能处理 "multipart/form-data" 请求。确保 @PostMapping 注解使用了 consumes = MediaType.MULTIPART_FORM_DATA_VALUE 属性。

@PostMapping(value = "/", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity<?> uploadImage(@RequestParam("myImage") MultipartFile file) {
  // 处理文件上传
}

4. 检查文件类型

确认发送的文件类型与控制器中指定的类型匹配。不匹配的文件类型也会导致 415 响应。

5. 禁用 gzip 压缩

在某些情况下，禁用 gzip 压缩可以解决 415 响应。可以在 Spring Boot 应用的 application.properties 文件中禁用 gzip 压缩：

server.compression.enabled=false

6. 启用 Spring Boot 自动配置

Spring Boot 提供了自动配置支持，用于处理 "multipart/form-data" 请求。确保在 Spring Boot 应用上下文中启用了 Multipart 自动配置：

@SpringBootApplication
public class Application {

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }
}