Apache+Cloudflare环境下React HTTPS站点非WWW转WWW重定向循环错误

1. 你的.htaccess配置问题分析 #

首先看你第二条规则的RewriteCond %{HTTP_HOST} ^www\.example.com\.com [NC]，这里多写了一个.com，属于明显的语法错误，会导致这条规则永远无法匹配。更关键的是Cloudflare反向代理引发的HTTPS判断偏差：当Cloudflare作为反向代理时，Apache收到的请求来自Cloudflare，此时%{HTTPS}变量可能显示为off（即便用户访问的是HTTPS），因为Cloudflare与Apache之间的通信可能是HTTP（除非你强制两者用HTTPS），这会直接触发重定向循环。

另外，你原有的规则拆分了非WWW转WWW、WWW强制HTTPS两个逻辑，在反向代理场景下容易因协议判断错误引发冲突。

2. 修正后的.htaccess配置 #

替换为以下适配Cloudflare场景的配置：

# Enable Rewrite Engine
RewriteEngine On

# 信任Cloudflare转发头，判断用户真实请求协议
RewriteCond %{HTTP:X-Forwarded-Proto} =http [OR]
# 匹配非WWW域名
RewriteCond %{HTTP_HOST} ^example\.com [NC]
# 统一重定向到HTTPS+WWW
RewriteRule ^(.*)$ https://www.example.com/$1 [L,R=301]

# 支持React客户端路由
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

# 设置默认索引页
DirectoryIndex index.html

# 自定义错误页
ErrorDocument 404 /404.html
ErrorDocument 500 /500.html

配置说明： #

• 用Cloudflare传递的X-Forwarded-Proto头判断用户真实请求的协议，避免反向代理导致的HTTPS判断错误。
• 合并非WWW转WWW与强制HTTPS的规则，减少规则层级，避免冲突。
• 移除了原有的错误WWW规则（多写.com的那条）。

3. Cloudflare设置调整 #

SSL模式确认 #

保持SSL模式为Full (Strict)，确保Cloudflare与Apache之间用HTTPS通信，同时你的服务器必须安装包含example.com和www.example.com的有效SSL证书，消除协议层混淆。

禁用Cloudflare自动HTTPS重定向 #

如果你之前设置了Cloudflare的“始终使用HTTPS”页面规则，建议立即禁用——它会和.htaccess的重定向规则冲突，直接引发循环。我们已经在.htaccess中处理了所有协议与域名的重定向逻辑，无需额外的Cloudflare自动规则。

清空缓存 #

每次修改配置后，必须在Cloudflare后台缓存>配置>清空全部缓存，确保新规则生效。

4. 替代实现方式（可选） #

如果不想修改服务器配置，可直接在Cloudflare后台配置重定向规则：

1. 进入规则>重定向规则
2. 创建两条规则：
   • 规则1：匹配http://example.com/*和https://example.com/*，重定向到https://www.example.com/$1，状态码设为301
   • 规则2：匹配http://www.example.com/*，重定向到https://www.example.com/$1，状态码设为301
     这种方式完全绕过Apache的.htaccess，避免反向代理带来的协议判断问题，适合不想改动服务器配置的场景。

验证方法 #

修改配置后，用curl命令测试重定向逻辑：

curl -I http://example.com
curl -I https://example.com
curl -I http://www.example.com

正常情况下，所有请求都会返回301 Moved Permanently，并指向https://www.example.com。

内容的提问来源于stack exchange，提问作者saood_ahmad