重定向到安全的 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>