重定向到 https 安全在 react-router 中不起作用

Posted 2023-02-21

【中文标题】重定向到 https 安全在 react-router 中不起作用

【英文标题】：Redirect to https secured not working in react-router

【发布时间】：2020-03-09 16:22:45

【问题描述】：

使用create-react-app 和react-router，我怎样才能做出以下任何变化（我认为我没有错过任何变化）：

www.example.com example.com http://example.com http://www.example.com

重定向到：

https://www.example.com（注意 https，安全）

我尝试添加 www 的子域，然后使用以下代码创建了一个 .htaccess 文件：

RewriteEngine On
RewriteCond %HTTPS !=on
RewriteRule ^(.*)$ https://%HTTP_HOST%REQUEST_URI [L,R=301,NE]

当我添加它时，反应路线不起作用，我得到一个空白页。 （我正在使用 1and1 托管。） 我做错了什么，我该如何解决？

【参考方案1】：

我遇到了这个问题，我也在使用 1&1，

这是因为您需要将所有内容重定向到您的 index.html 以使 react-router 正常工作。

在这里，您只需将 http 重定向到 https，这是工作的第一部分。但是，您还需要将该 https 请求重定向到您的 index.html 文件。

所以你将你的 http 重定向到 https ：

RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteCond %REQUEST_FILENAME !-l
RewriteCond %HTTPS off
RewriteRule ^(.*)$ https://%HTTP_HOST%REQUEST_URI [NC,L,R=301]

然后，如果 https 处于“打开”状态，则将所有内容重定向到 index.html

RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteCond %REQUEST_FILENAME !-l
RewriteCond %HTTPS on
RewriteRule ^(.*)$ /index.html [NC,L,QSA]

你可以在这里测试你的.htaccess：https://htaccess.madewithlove.be/ 理论上它可以正常工作，但我不知道为什么在我的情况下，当 URI 为“/”时重定向不起作用。

所以我添加了这个：

“如果 https 未激活且 URI 为“/”，则使用 https 重定向到我网站的根目录”

RewriteCond %HTTPS off
RewriteCond %REQUEST_URI ^.$
RewriteRule .* https://"your-site.com"/ [NC,L,R=301]

---

总结答案

<IfModule mod_rewrite.c>

    RewriteEngine On
    RewriteCond %HTTPS off
    RewriteCond %REQUEST_URI ^.$
    RewriteRule ^(.*)$ https://"your-site.com"/ [NC,L,R=301]

    RewriteCond %REQUEST_FILENAME !-f
    RewriteCond %REQUEST_FILENAME !-d
    RewriteCond %REQUEST_FILENAME !-l
    RewriteCond %HTTPS off
    RewriteRule ^(.*)$ https://%HTTP_HOST%REQUEST_URI [NC,L,R=301]

    RewriteCond %REQUEST_FILENAME !-f
    RewriteCond %REQUEST_FILENAME !-d
    RewriteCond %REQUEST_FILENAME !-l
    RewriteCond %HTTPS on
    RewriteRule ^(.*)$ /index.html [NC,L,QSA]

</IfModule>