如何利用 Nginx 解决 React 应用部署后 API 请求连接超时-Nginx-PHP中文网

react生产部署时需用nginx反向代理区分/api请求与前端路由：/api/开头的请求透传至后端（如http://127.0.0.1:8080），其余请求交由index.html处理；须用^~ /api/确保前缀匹配优先级，proxy_pass末尾加/以剥离路径前缀，并配置超时与请求头。

如何利用 nginx 解决 react 应用部署后 api 请求连接超时

React 应用部署到生产环境后，前端通过相对路径（如 /api/users）调用后端 API，但浏览器实际发起的是对当前域名的请求（比如 https://your-app.com/api/users），而该地址往往并未配置后端服务——这会导致 404 或连接超时。根本原因不是网络问题，而是前端路由与后端 API 路由未被 Nginx 正确区分和转发。解决的关键在于：**用 Nginx 做反向代理，把所有以 /api/ 开头的请求透传给真实后端，其余请求全部交给 React 的 index.html 处理（支持前端路由）**。

正确配置 Nginx location 分流规则

Nginx 必须明确区分静态资源、API 接口和前端路由。不能只靠 try_files $uri $uri/ /index.html; 一把抓，否则所有请求（包括 /api/login）都会落到 index.html，导致前端发不出真实 API 请求。

推荐配置示例（假设后端运行在 http://127.0.0.1:8080）：

location / {
    try_files $uri $uri/ /index.html;
}
<p>location ^~ /api/ {
proxy_pass <a href="https://www.php.cn/link/2c98005815b8652f236d1be11039c4bc">https://www.php.cn/link/2c98005815b8652f236d1be11039c4bc</a>;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;</p><pre class="brush:php;toolbar:false;"># 关键：避免因后端响应慢或网络抖动导致超时
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 60;

}

使用 ^~ /api/ 而非 /api/：确保前缀匹配优先级高于正则 location，防止被其他规则覆盖
proxy_pass 末尾带 /：Nginx 会自动剥离 /api/ 前缀再转发，后端收到的是 /users 而非 /api/users；若不加斜杠，路径会原样透传，易出错
显式设置超时时间：默认 proxy_read_timeout 是 60 秒，但某些长耗时接口或弱网环境仍可能触发超时，按需调大

确认 React 请求路径与 Nginx 规则一致

前端代码中 API 请求必须使用相对路径，且严格匹配 Nginx 中定义的代理前缀。

✅ 正确写法：fetch('/api/users')、axios.get('/api/orders')
❌ 错误写法：fetch('http://localhost:8080/api/users')（硬编码开发地址，上线必失败）
❌ 错误写法：fetch('/backend/api/users')（Nginx 没配 /backend/，直接 404）

建议统一通过环境变量控制 base URL，例如在 .env.production 中设 REACT_APP_API_BASE_URL=/api，请求时拼接：fetch(`${process.env.REACT_APP_API_BASE_URL}/users`)，便于多环境切换。

排查常见超时诱因

即使配置正确，仍可能因以下原因出现“连接超时”（Connection timed out）或“网关超时”（504 Gateway Timeout）：

后端服务未启动或监听地址不对：检查 netstat -tuln | grep :8080，确认后端确实在 127.0.0.1:8080 监听（而非仅 localhost 或 0.0.0.0 但防火墙拦截）
Docker 容器网络隔离：若后端在 Docker 中，Nginx 在宿主机，proxy_pass http://127.0.0.1:8080 无法访问容器内服务，应改用 http://host.docker.internal:8080（Mac/Windows）或宿主机真实 IP（Linux）
SELinux 或防火墙拦截：CentOS/RHEL 默认开启 SELinux，可能阻止 Nginx 建立 outbound 连接，执行 setsebool -P httpd_can_network_connect 1 临时放行
后端自身响应慢：用 curl -v https://www.php.cn/link/2c98005815b8652f236d1be11039c4bcapi/test 直连后端测试耗时，排除后端性能瓶颈

验证与调试技巧

快速确认是否生效：

浏览器访问 https://your-app.com/api/health，应返回后端响应（非 HTML 页面）；若返回首页内容，说明 location 未命中，检查 Nginx 配置语法和重载状态（nginx -t && nginx -s reload）
查看 Nginx error log：tail -f /var/log/nginx/error.log，关注 upstream timed out 或 connection refused 等关键词
在 location ^~ /api/ 块中临时加 return 200 "proxy hit";，访问 /api/test 看是否返回该字符串，验证路由是否走对