手动输入完整URL时React网站连接未加密问题求助

我一眼就看出问题所在了——你的HTTPS强制跳转规则放错位置啦！

问题原因 #

你现在的.htaccess里，React SPA的路由规则（就是那条RewriteRule . /index.html [L]）用了[L]标记，这个标记的意思是“匹配到这条规则后就停止处理后续所有规则”。所以当你手动输入myapp.com/shop这种HTTP地址时，Apache会先触发SPA的路由规则，直接把请求转发到index.html，完全没机会执行后面的HTTPS跳转规则，自然就显示未加密了。

修复方案 #

把HTTPS强制跳转的规则移到所有规则的最前面，并且加上[R=301]标记（永久重定向，对SEO和浏览器缓存更友好）。修改后的.htaccess应该是这样：

RewriteEngine On
RewriteBase /

# 先强制HTTPS跳转，优先执行
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# 然后处理React SPA的路由规则
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php73” package as the default “PHP” programming language.
<IfModule mime_module>
AddHandler application/x-httpd-ea-php73 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit

额外提示 #

修改完之后记得清空浏览器缓存再测试，因为浏览器可能会缓存之前的重定向规则。另外，[R=301]是永久重定向，如果你只是临时测试，可以先用[R=302]（临时重定向），确认没问题再换回301。

内容的提问来源于stack exchange，提问作者Armin Dervić