Nginx部署React项目时重定向循环问题的解决方案
Nginx 错误日志中的以下错误信息：
2024/12/11 11:28:44 [error] 37#37: *6 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 61.169.61.66, server: cms.stormsha.com, request: "GET / HTTP/1.1", host: "cms.stormsha.com"
表示 Nginx 在处理请求时陷入了重定向循环，无法正确找到 index.html 文件。这通常是由于 Nginx 配置中的 try_files 或 rewrite 规则配置不当导致的。
问题原因
1. try_files 配置错误
在 React 项目的 Nginx 配置中，通常会使用 try_files 来确保所有请求都指向 index.html，以支持 React 的客户端路由。如果 try_files 配置不当，可能会导致重定向循环。
例如，以下配置可能会导致问题：
location / {
try_files $uri $uri/ /index.html;
}
2. root 路径错误
如果 root 路径配置错误，Nginx 可能无法正确找到 index.html 文件，从而导致重定向循环。
解决方法
1. 检查 try_files 配置
确保 try_files 配置正确。以下是一个正确的配置示例：
location / {
try_files $uri /index.html;
}
说明：
$uri：尝试匹配请求的 URI。/index.html：如果$uri不存在，则重定向到index.html。
2. 检查 root 路径
server {
listen 80;
server_name cms.stormsha.com;
root /path/to/your/react-project/build; # 确保路径正确
index index.html;
location / {
try_files $uri /index.html;
}
}
检查路径是否正确
你可以通过以下命令检查路径是否正确：
ls /path/to/your/react-project/build
确保 build 目录中包含 index.html 文件。
3. 检查文件权限
确保 Nginx 有权限访问 build 目录中的文件。你可以通过以下命令检查权限：
ls -l /path/to/your/react-project/build
如果权限不足，可以修改权限：
sudo chmod -R 755 /path/to/your/react-project/build sudo chown -R www-data:www-data /path/to/your/react-project/build
4. 检查 Nginx 配置
重新测试 Nginx 配置，确保没有语法错误：
sudo nginx -t
如果测试通过，重启 Nginx：
sudo systemctl restart nginx
示例配置
以下是一个完整的 Nginx 配置示例，适用于部署 React 项目：
server {
listen 80;
server_name cms.stormsha.com;
root /path/to/your/react-project/build; # 替换为你的 React 项目 build 目录的路径
index index.html;
location / {
try_files $uri /index.html;
}
error_page 404 /index.html;
}
总结
Nginx 错误 rewrite or internal redirection cycle 通常是由于 try_files 配置不当或 root 路径错误导致的。解决方法包括：
- 检查并修正
try_files配置。 - 确保
root路径指向正确的build目录。 - 检查文件权限，确保 Nginx 有权限访问文件。
- 测试并重启 Nginx。
希望这些步骤能帮助你解决 Nginx 的重定向循环问题！
到此这篇关于Nginx部署React项目时重定向循环问题的解决方案的文章就介绍到这了,更多相关Nginx部署React重定向循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
网页502 Bad Gateway nginx/1.20.1报错的原因与解决方法
502 bad gateway nginx/1.20.1 是一个错误提示,通常出现在访问网站时出现问题,这篇文章主要给大家介绍了关于网页502 Bad Gateway nginx/1.20.1报错的原因与解决方法,需要的朋友可以参考下2024-03-03
本文主要介绍了Nginx反向代理后无法获取客户端真实IP地址，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
本文主要介绍了Nginx中proxy_pass末尾带斜杠/和不带的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-02-02
这篇文章主要介绍了Nginx实现动静分离的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了详解通过Nginx部署Django（基于ubuntu)，Django的部署可以有很多方式，采用nginx+uwsgi的方式是其中比较常见的一种方式，有兴趣的可以了解一下。2017-01-01
这篇文章主要介绍了Nginx与Apache共用80端口的配置方法,当然如果想Nginx不与Apache抢80端口的话,本文后面也附带了Nginx的端口修改方法,需要的朋友可以参考下2016-01-01
nginx使用nginx-rtmp-module模块实现直播间功能
做的过程出现很多问题，环境其实就需要nginx就可以，然后就是在播放的问题，m3u8的格式，mac直接访问就支持，苹果系统原生H5支持m3u8，还有就是手机直接访问也支持！但是其他其他系统PC端不支持，尝试了好多都不行，最后终于找到了一个支持m3u8格式H5播放2017-10-10
这篇文章主要介绍了详解php+nginx 服务发生500 502错误排查思路，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
在 Web 开发和服务器运维中,Nginx 的配置管理和后端 API 的数据查询优化是常见的需求,本文将通过两个典型场景进行详细讲解文章包含详细的操作步骤、代码示例和优化建议,需要的朋友可以参考下2025-05-05
今天小编就为大家分享一篇关于使用nginx模拟进行蓝绿部署的方式，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
最新评论