【前端笔记】网络请求问题:413 request entity too large

文章讨论了在上传图片时遇到的‘请求报文实体过大’问题,原因包括BASE64字符串增大图片大小和HTTP请求的大小限制。推荐使用文件流方式上传文件,而非转换为BASE64通过JSON,同时也提到可以通过调整服务器配置如Nginx的`client_max_body_size`来解决,但这种方法可能带来其他问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景:上传图片给服务端,将图片转为BASE64字符串,通过http请求上送json数据方式实现图片上传,接口报错:“请求报文实体过大”
分析:
1,图片转换为BASE64字符串,大小会增加约30%(基本原理:3字节一组转换为4字节一组)
2,http请求JSON报文大小一般建议不超过200kb,否则加解密过程会很慢
3,服务器、网关等一般都会限制报文大小,比如Nginx默认限制报文大小为1M,超过这个大小就会报上面这个错
解决方法:
1,上传文件更适合采用文件流的方式,几十kb以内的小图片可以转为BASE64字符串通过JSON方式上传。【推荐文件流方式上传文件】
2,找运维修改服务器/网关配置,比如Nginx配置,将报文大小限制提高到比如50M:打开nginx.conf,在http{ }中设置:client_max_body_size 50m
不推荐这种做法,因为可能会引发别的问题,比如Nginx缓存区撑爆、接口超时、浏览器对大报文请求的拦截等问题。

要解决上传文件时出现的 **HTTP 413 Request Entity Too Large** 错误,需要根据服务器环境调整相关配置。该错误通常发生在请求体过大,超出了服务器允许的最大限制。 以下是不同服务器和框架下的解决方案: ### Nginx 配置 Nginx 默认允许的客户端请求体大小为 **1MB**,可以通过修改 `client_max_body_size` 来调整上传限制[^5]。在 Nginx 的配置文件中添加或修改以下内容: ```nginx http { client_max_body_size 100M; # 允许最大上传大小为100MB } server { client_max_body_size 100M; location /upload { client_max_body_size 100M; } } ``` 如果部署在 Kubernetes 上,还需要在 Ingress 配置中设置相应的 body 大小限制: ```yaml nginx.ingress.kubernetes.io/proxy-body-size: "100m" ``` ### Apache 配置 在 Apache 环境下,可以通过修改 `LimitRequestBody` 指令来调整上传文件的大小限制。该指令默认值为 **512KB 到 2GB** 之间,具体取决于服务器配置。可以在 `.htaccess` 文件或 Apache 主配置文件中进行如下配置: ```apache <Directory "/var/www/html"> LimitRequestBody 65536000 # 60MB </Directory> ``` ### Tomcat 配置 对于使用 Tomcat 作为服务器的应用,可以通过修改 `server.xml` 文件中的 `max-http-form-post-size` 属性来调整上传限制(Tomcat 8+): ```xml <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" max-http-form-post-size="104857600"/> <!-- 设置为100MB --> ``` ### Spring Boot 配置 在 Spring Boot 应用中,可以调整 `application.yml` 或 `application.properties` 文件中的上传限制参数: ```yaml spring: servlet: multipart: max-file-size: 100MB max-request-size: 200MB ``` 如果是较老版本的 Spring Boot(使用 `http.maxFileSize` 和 `http.maxRequestSize`): ```yaml spring: http: max-file-size: 100MB max-request-size: 200MB ``` ### PHP 配置 在 PHP 环境中,需修改 `php.ini` 文件中的以下参数: ```ini upload_max_filesize = 100M post_max_size = 100M ``` 确保 `post_max_size` 至少与 `upload_max_filesize` 相同或更大,否则上传大文件时仍会失败。 ### 前端注意事项 前端上传文件时,建议对文件大小进行校验,避免因服务器拒绝请求而浪费网络资源。例如,在 JavaScript 中检查文件大小: ```javascript const fileInput = document.getElementById('file'); fileInput.addEventListener('change', function () { const file = this.files[0]; const maxSize = 100 * 1024 * 1024; // 100MB if (file.size > maxSize) { alert('文件大小不能超过100MB'); this.value = ''; // 清空输入框 } }); ``` ### 总结 要彻底解决 HTTP 413 错误,必须检查并调整所有涉及的组件,包括但不限于 Web 服务器(Nginx/Apache)、应用服务器(Tomcat)、框架(Spring Boot、PHP)等。确保每一层都允许上传指定大小的文件,以保证整个链路通畅。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值