解决Web端请求响应超时HTTP状态码504和110 timed out错误（详解汇总）

前言

在前端开发中，发送请求时，有时会遇到请求响应超时的问题（如 HTTP 状态码504 和 110错误）。这种问题可能是由于网络延迟、服务器响应时间过长或请求数据量过大等原因造成的。为了解决这个问题，我们可以通过配置 Nginx 来调整相关参数，以提高请求处理和响应时间。

解决步骤

在下面的示例中，我们将演示如何使用 Nginx 的配置来解决Web端请求响应超时的问题，前提条件是前端发布前的Request请求响应设置也加长了延时，比如，LZ的React搭的前端的设置如下，在request.js中，创建axios实例的时候设置timeout的属性值，具体大小根据自己的需求设置：

//创建一个axios实例
const service = axios.create({
  baseURL: "", // api 的 base_url
  timeout: 60000 * 10, // request timeout
});
1
2
3
4
5

1. 打开 Nginx 配置文件

首先，按照所使用的系统，找到并打开 Nginx 的配置文件。一般情况下，这个文件位于 /etc/nginx/nginx.conf 或者/etc/nginx/conf.d/default.conf。

2. 配置缓冲区大小

在配置文件中找到http {}部分，添加以下配置项来增加读取大型客户端请求头的缓冲区的最大数量和大小：

large_client_header_buffers 4 16k; # 设置读取大型客户端请求头的缓冲区的最大数量和大小

这将提高 Nginx 对于大型客户端请求头的处理能力。

3. 配置请求主体大小

同样在 http {} 部分，配置 Nginx 能处理的最大请求主体大小：

client_max_body_size 1000m; # 设置 Nginx 能处理的最大请求主体大小

通过设置适当的数值，确保请求主体不会因为过大而导致超时。

4. 配置请求主体缓冲区大小

在 http {} 部分，配置请求主体的缓冲区大小：

client_body_buffer_size 128k; # 设置请求主体的缓冲区大小请求主体的缓冲区大小

这将控制 Nginx 对于请求主体数据的缓冲处理。

5. 配置代理超时时间

在http {}部分，配置代理的超时时间来提高请求的响应速度：

proxy_connect_timeout 600000; # 设定代理连接超时时间，单位为毫秒
proxy_read_timeout 600000; # 设定代理读取超时时间，单位为毫秒
proxy_send_timeout 600000; # 设定代理发送超时时间，单位为毫秒

通过将超时时间设置为一个较大的数值，确保 Nginx 足够长的等待时间来处理请求和响应。
例如设置好的配置显示如下：

6. 重启 Nginx 服务器

最后，在完成上述配置后，保存并关闭 Nginx 配置文件。
重启 Nginx 服务器可以通过运行适当的命令如下，以使配置更改生效。注意：
/usr/local/nginx/sbin/nginx是你的nginx服务启动脚本路径。或者通过systemctl 、service 命令重启。具体看你nginx版本和如何安装的。

sudo systemctl restart nginx
或者
/usr/local/nginx/sbin/nginx -s reload
或者
sudo service nginx restart

总结

通过以上的配置，我们可以提高 Nginx 对于大型请求头和请求主体的处理能力，并增加代理的超时时间，从而解决Web端请求响应超时的问题。请根据具体需求调整参数的数值。