reactjs - 重定向到 protected https 在 react 路由器中不起作用

Question

将 create-react-app 与 react-router 一起使用，我怎样才能做出以下任何变化(我认为我没有遗漏任何变化):

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

重定向到:

https://www.example.com (注意 https， protected )

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

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

当我添加它时， react 路线不起作用，我得到一个空白页面。 (我正在使用 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>