问题描述

项目上线后，发现如果上传的文件超过1M，就会报错：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

分析

使用浏览器的开发者工具查看了上传文件报错的那个请求，状态码为：413 Request Entity Too Large

错误代码413 Request Entity Too Large表示客户端尝试发送的请求体超过了服务器能够或愿意处理的大小限制，这通常发生在以下几种情况下：

  1. 上传大文件：当您尝试上传的文件超过了服务器设置的最大文件大小限制时
  2. POST请求体过大：当您通过POST请求发送大量数据时，如果数据超过了服务器的限制，也会出现这个错误

以下是一些解决这个问题的方法：

  1. 减小请求体大小：

    如果是上传文件，尝试上传一个更小的文件

    如果是发送数据，检查是否可以优化数据结构或分批发送数据

  2. 修改服务器配置：

    如果您有权访问服务器配置，可以增加允许的最大请求体大小

解决办法

上面的第一种办法不考虑，直接修改服务器的配置增加允许的最大请求体大小

我的项目是用Spring Boot开发的，所以要去配置文件那里设置一下可以上传的单个文件的最大值为5M（默认是1M），修改这些配置后，重新启动 Spring Boot 应用程序，新的文件大小限制就会生效

1
2
3
4
spring:
  servlet:
    multipart:
      max-file-size: 10MB

接着去修改Nginx的默认请求体大小配置，配置文件的路径为/etc/nginx/nginx.conf，在下图的位置加上下面代码，改完后根据继续下面的操作重新加载Nginx的配置即可

1
2
# 允许上传的最大文件大小为5M
client_max_body_size 5m;

image-20241114052240336

先测试配置是否有语法错误，可以使用以下命令进行测试，如果输出显示 syntax is ok 和 test is successful，说明配置文件没有问题

1
nginx -t

测试通过后，可以通过以下命令让Nginx重新加载配置文件而不中断服务

1
nginx -s reload