前言

在 Web 開發(fā)中，HTTP 413 狀態(tài)碼是一個(gè)常見但容易被誤解的狀態(tài)碼，尤其在文件上傳或大請求體場景下。本文將從 413 的含義、觸發(fā)來源、前端處理、服務(wù)端自定義以及上傳大小上限等方面進(jìn)行詳細(xì)講解。

一、HTTP 413 代表什么？

HTTP 413 的全稱是 “413 Payload Too Large”（以前叫 Request Entity Too Large），表示客戶端發(fā)送的請求體過大，服務(wù)器拒絕處理。

• 狀態(tài)碼：413

• 含義：請求體超過服務(wù)器允許的最大值

• 常見場景：

  • 用戶上傳過大的圖片、視頻或壓縮文件

  • POST/PUT 請求發(fā)送大量 JSON 或表單數(shù)據(jù)

  • 批量操作接口一次性傳遞大量數(shù)據(jù)

簡言之，就是請求的數(shù)據(jù)量超過了服務(wù)器的處理限制。

二、HTTP 413 是誰返回的？

413 并不是瀏覽器主動報(bào)的，實(shí)際上是 服務(wù)器或代理返回的。

• Web 服務(wù)器或代理

  • Nginx、Apache、Cloudflare 等可以配置請求體大小限制

  • 超過限制時(shí)，直接返回 413，不會進(jìn)入后端應(yīng)用

• 后端框架

  • Express、Koa、Spring 等框架解析請求體時(shí)，也可能根據(jù)配置返回 413

• 瀏覽器的作用

  • 瀏覽器只負(fù)責(zé)發(fā)送請求

  • 如果服務(wù)器拒絕，瀏覽器拿到響應(yīng)狀態(tài)碼

  • 瀏覽器本身不會“自動報(bào) 413”

三、可以手動修改 413 狀態(tài)碼嗎？

如果你自己寫服務(wù)端邏輯，是可以手動修改返回狀態(tài)碼的。

• 前提是 請求體沒有觸發(fā)服務(wù)器或框架的自動限制

• 例如在 Node.js + Express 中：

const express = require('express');
const app = express();
 
// 自定義 body 限制
app.use(express.json({ limit: '100mb' }));
 
app.post('/upload', (req, res) => {
  const data = req.body;
 
  // 即使請求很大，也可以不返回 413
  if (data.size > 50 * 1024 * 1024) {
    return res.status(200).json({ message: '文件太大，但我選擇不返回 413' });
  }
 
  res.send('上傳成功');
});
 
app.listen(3000);

• 注意事項(xiàng)：

  • 如果框架限制了請求體大小，超出限制的請求在解析階段就會報(bào)錯，無法手動修改。

  • 最好結(jié)合前端校驗(yàn)，避免一次性請求過大占用服務(wù)器資源。

四、前端如何處理 413

前端主要從 請求控制 和 用戶體驗(yàn) 兩個(gè)方面應(yīng)對 413：

1. 限制文件大小

const maxFileSize = 50 * 1024 * 1024; // 50MB
 
function handleFileUpload(file) {
  if (file.size > maxFileSize) {
    alert('文件過大，請上傳不超過 50MB 的文件');
    return;
  }
  // 繼續(xù)上傳邏輯
}

1. 分片上傳

   • 利用 Blob.slice 或第三方庫（如 tus-js-client）分片上傳

   • 每片上傳完成后，服務(wù)器合并

2. 前端壓縮

   • 對圖片、視頻等進(jìn)行壓縮，減少請求體大小

3. 統(tǒng)一錯誤處理

axios.post('/upload', file)
  .catch(error => {
    if (error.response?.status === 413) {
      alert('上傳內(nèi)容過大，請嘗試壓縮或分片上傳');
    }
  });

五、上傳文件大小的上限

• 理論上瀏覽器上傳沒有硬性上限

• 限制主要來自：

  1. 服務(wù)器或代理配置（如 Nginx 默認(rèn) 1MB）

  2. 后端框架請求體限制

• 瀏覽器在內(nèi)存或網(wǎng)絡(luò)受限的情況下，上傳非常大的文件可能失敗

• 最佳實(shí)踐：

  • 前端限制文件大小

  • 對大文件進(jìn)行分片上傳或壓縮

  • 使用專業(yè)的上傳服務(wù)（OSS、S3 等）

六、總結(jié)

1. 413 表示請求體過大，通常用于上傳或大數(shù)據(jù)請求

2. 狀態(tài)碼由服務(wù)器或框架返回，瀏覽器不會自動報(bào)錯

3. 自己寫服務(wù)端可以手動修改狀態(tài)碼，但要注意框架或代理限制

4. 上傳文件默認(rèn)沒有上限，實(shí)際上限取決于服務(wù)器配置、內(nèi)存和網(wǎng)絡(luò)狀況

5. 前端處理：

   • 限制大小

   • 分片上傳

   • 壓縮處理

   • 捕獲 413 并給出友好提示

合理結(jié)合前端與后端的控制，可以有效避免 413 錯誤，同時(shí)提升用戶體驗(yàn)。

到此這篇關(guān)于HTTP 413狀態(tài)碼詳解與前端處理請求體過大的文章就介紹到這了,更多相關(guān)HTTP 413狀態(tài)碼詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！