报错场景
- 在文件上传的时候，选择一个文件去上传
- 点击上传发送请求，network接口报错413，console控制台也报错，相关信息如下：
报错原因
- 服务器使用nginx做反向代理，nginx设置了客户端body传参请求大小2MB的限制
- 即：client_max_body_size 2m;
- 我们只需把这个限制给放开，放大一些即可
- 如下nginx代码：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
keepalive_timeout 65;
#这里改一下，把原本两兆的限制，适当放大一些即可
#这里改一下，把原本两兆的限制，适当放大一些即可
client_max_body_size 2m;
server {
listen 80;
server_name localhost;
add_header 'Referrer-Policy' 'origin';
location / { ... }
}
}从请求头的Content-Length也可以看上传文件的大小
- 上图字节数明显是4MB多了
- 超过了nginx的2MB限制
- 自然是请求无法代理成功
- 最后别忘了重启一下nginx
nginx -s reload
若是想要复现这个问题，就直接把client_max_body_size改的很小，再上传请求一下，就会出现了
A good memory is better than a bad pen. Write it down...
提供接口复现bug
注意，上传的时候，找一个大于2MB的文件上传即可复现bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传文件大于2MB后nginx就报错了</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="file" />
<script>
let ipt = document.querySelector('input')
ipt.addEventListener('change', async (e) => {
let file = e.target.files[0]
const formData = new FormData()
formData.append('find_a_file_size_bigger_2m', file)
await uploadFn(formData)
e.target.value = null // 清空，要不然再上传同样的文件就不触发change事件了
})
const uploadFn = (params) => {
return new Promise((resolve, reject) => {
axios.post('http://ashuai.work/api/simulateUpload', params)
.then((res) => {
resolve(res.data)
})
.catch((err) => {
reject(err)
console.log(err);
});
})
}
</script>
</body>
</html>因为一些原因，放大到超过10MB了，才能复现，请注意
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。