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

Question

使用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 托管。） 我做错了什么，我该如何解决？

Answer 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>