解决前端上传文件大小限制和超时无响应

一、背景

笔者最近开发前后端分离项目遇到一些问题，后端服务是基于80/443端口反向代理的，所以请求会经过nginx网关，然后将请求代理到后端服务，这是开发环境。

二、问题

• 文件上传大小有限制
• 上传时间过长无响应
• 前端请求等待超时

二、解决方案

nginx.conf

http {
    ...

    # 性能优化
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    # 客户端请求配置
    client_max_body_size 1000M;   # 解决文件上传大小限制
    client_body_buffer_size 2M; 
    client_header_buffer_size 256k;
    large_client_header_buffers 4 256k;

    # 超时设置            
    client_body_timeout 600s;
    client_header_timeout 600s;
    keepalive_timeout 120s;
    keepalive_requests 1000;

    # 反向代理配置
    proxy_connect_timeout 600s;
    proxy_send_timeout 600s;
    proxy_read_timeout 600s;
}

经过以上客户端请求配置和超时配置后按理说就解决了上面两个问题了，可是当我再进行测试的时候，接口依旧1分钟请求超时。

最后我想了一圈也没想到竟然是axios请求超时配置是60000ms，也就是1分钟，此时此刻豁然开朗了。

const service = axios.create({
	baseURL: '/api', // api base_url
	timeout: 300000 // 请求超时时间, 配置为5分钟
})

再进行测试

🆗，也是上传成功了，没想到用时2.6分钟。

四、总结

配置nginx文件限制不仅仅在nginx中配置，后端服务也要配置，因为有好几层网关，例如SpringBoot的配置：

# multipart configuration
spring.servlet.multipart.max-request-size=100MB
spring.servlet.multipart.max-file-size=100MB

还有就是请求超时配置，例如axios的请求超时时间：

const service = axios.create({
	baseURL: '/api', // api base_url
	timeout: 300000 // 请求超时时间, 配置为5分钟
})

最后还有nginx配置：

http {
    ...

    # 性能优化
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    # 客户端请求配置
    client_max_body_size 100M;   # 解决文件上传大小限制
    client_body_buffer_size 2M; 
    client_header_buffer_size 256k;
    large_client_header_buffers 4 256k;

    # 超时设置            
    client_body_timeout 600s;
    client_header_timeout 600s;
    keepalive_timeout 120s;
    keepalive_requests 1000;

    # 反向代理配置
    proxy_connect_timeout 600s;
    proxy_send_timeout 600s;
    proxy_read_timeout 600s;
}

这三板斧下来就能够解决大部分文件上传问题了。