React redirect to index.html, www & https

Question

I have a react app published to the web. I have the solution in place suggested by react to redirect all pages to index.html, that seems to work just fine by itself. I also need to redirect everything to https://www. That is where things start to fall apart. I can find bits and pieces of articles like: react-router redirect to index.html AND remove www from url in .htaccess

These provide useful info, but I'm still stuck in a position where I'm getting redirect loops in certain situations. I'm hoping someone with far more superior rewriting skills can point out my errors. I don't know if it matters, but I am using "react-dom": "^16.3.2", "react-router-dom": "^4.2.2", "webpack": "^4.8.1"

This is what I have come up with:

Options -MultiViews
RewriteEngine On

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

RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www\.%{HTTP_HOST}%{REQUEST_URI} [R=302,L,NE]

RewriteCond %{REQUEST_FILENAME} !-d 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^. index.html [QSA,L]

` I'm getting redirect loops in certain situations`: For what URLs do you get a redirect loop and did you test in a new browser? — anubhava, May 15 '18 at 15:54
@anubhava I am actually getting a redirect loop on both the www and https. As is, it's only working with the index.html rule in place. Once I add the www and https rule, I run into the redirect loop. — Clinton, May 15 '18 at 19:25
These rules won't cause redirect loop unless there is some other conflicting code/rule . — anubhava, May 15 '18 at 20:18

score 1 · Answer 1 · answered May 19 '18 at 12:40

Some subtle differences that may improve things:

Options -MultiViews
RewriteEngine On
RewriteCond %{HTTPS} =off
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+) [NC]
RewriteRule ^ https://www.%1%{REQUEST_URI} [R=302,L,NE]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^ https://www\.%{HTTP_HOST}%{REQUEST_URI} [R=302,L,NE]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [END]

The first change prevents a double-redirect, the patterns are simpler, and, lastly rewriting is terminated asap. If it works, then change your 302s to 301s.

React redirect to index.html, www & https

1 Answers1