在 Spring Boot Web API 中上传较大文件（MultipartFile）时发生 CORS 错误

Question

我有以下 API 来保存 MultipartFile。如果文件大小低于定义的限制，我可以保存文件。

@PostMapping("/attachments")
    @Operation(summary = "save attachments")
    public ResponseEntity<List<Attachment>> saveAttachments(@RequestParam ("files") MultipartFile[] files,@RequestParam ("id") Long id) {
        return ResponseEntity.ok(myservice.saveAttachment(id, files));
    }

下面是我的属性文件：

spring.servlet.multipart.enabled=true
spring.servlet.multipart.file-size-threshold=2KB
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=200MB

现在，如果我上传任何低于 10MB 的内容，它都可以正常工作，不会出现任何错误。但是，当我尝试上传任何超过 10MB 的文件时，我收到 CORS 策略错误（我已经定义了 CORS 策略）。

Access to XMLHttpRequest at 'http://localhost:8002/api/attachments' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我正在处理文件大小异常并在后端收到以下异常处理消息：

Resolved [org.springframework.web.multipart.MaxUploadSizeExceededException: Maximum upload size exceeded]

Answer 1

这可能是由于飞行前的请求

CORS 预检请求是 Web 浏览器在发送实际请求之前发送到服务器的 HTTP OPTIONS 请求。预检请求的目的是确定服务器是否允许发出实际请求。

因此您的浏览器发送一个预检请求“包含内容长度标头”来询问服务器是否允许此请求，服务器检查大小是否大于其允许的大小，因此它说不，我不会允许此请求。

您的修复方法是编辑 application.properties 以支持您想要的任何大小

这里我将每个请求的最大大小设置为 1GB

spring.servlet.multipart.max-file-size=1000MB
spring.servlet.multipart.max-request-size=1000MB

Answer 2

如果您使用

WebMvcConfigurer

，请更改为使用

CorsFilter

。我在这里

字体

这里我的代码更改了它修复了我的错误。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Arrays;
import java.util.Collections;

@Configuration
public class WebConfiguration {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowCredentials(true);
        configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
        configuration.setAllowedHeaders(Arrays.asList(
                HttpHeaders.ORIGIN,
                HttpHeaders.CONTENT_TYPE,
                HttpHeaders.ACCEPT,
                HttpHeaders.AUTHORIZATION
        ));
        configuration.setAllowedMethods(Arrays.asList(
                "GET",
                "POST",
                "DELETE",
                "PUT",
                "PATCH"
        ));
        source.registerCorsConfiguration("/**", configuration);
        return new CorsFilter(source);
    }
}

将

http://localhost:3000

更改为您允许的来源