部署于Heroku的NuxtJS站点如何配置http到https重定向

现有配置存在的问题 #

• 规则顺序逻辑错误，第一条非www转www的规则标记了L（命中后终止后续规则执行），且跳转目标为http协议，所有命中该规则的请求会直接终止流程，不会执行后续的HTTPS跳转逻辑
• 重复声明RewriteEngine On，会覆盖之前的规则配置上下文，导致部分规则失效
• HTTPS判断逻辑拆分，没有合并两种判断条件（原生HTTPS状态和代理转发的X-Forwarded-Proto头），GoDaddy主机多数使用反向代理架构，仅判断HTTPS off无法识别用户真实请求协议

正确的.htaccess配置 #

RewriteEngine On

# 统一HTTP转HTTPS，兼容GoDaddy代理架构
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# 非www跳转www，不需要可删除本段
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [L,R=301]

生效检查项 #

• 确认.htaccess文件上传到站点的根目录（对应HTTP访问的根路径，不是Nuxt源码的src目录）
• 确认GoDaddy主机使用Apache架构且开启了.htaccess支持，若使用Nginx托管方案，.htaccess规则不生效，需要在主机面板的重定向规则页手动配置HTTP转HTTPS
• 测试前清除浏览器缓存，301重定向会被浏览器永久缓存，调试阶段建议先将规则中的R=301改为R=302，确认逻辑生效后再改回301

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