Add HTTPS redirect for Progressive Web App with HTML 5 history mode

Question

I have a progressive web application, built using Vue CLI 3, that is currently using the HTML 5 history mode. I have followed the documentation to add the necessary configuration to the .htaccess, however this example does not cover redirecting to HTTPS. This is what I have:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

I have followed other Stack Overflow responses on how to redirect all requests to HTTPS via .htaccess, but this results in an endless redirect loop. So what I need is to redirect non HTTPS requests to HTTPS while still honoring the index.html redirect.

https://www.namecheap.com/support/knowledgebase/article.aspx/9821/38/apache-redirect-to-https - read about half way down *Use Apache Rewritecond - mod_rewrite Rule* - or https://www.sslshopper.com/apache-redirect-http-to-https.html or https://stackoverflow.com/questions/16200501/http-to-https-apache-redirection ... there's so many search results — Jaromanda X, Mar 09 '20 at 05:14

score 0 · Answer 1 · answered Mar 09 '20 at 14:12

After additional research, I was able to fix my problem by prepending the .htaccess file with some HTTPS specific configuration. So now my file looks like this:

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP:X-Forwarded-Proto} !=https
  RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L,N]

  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Add HTTPS redirect for Progressive Web App with HTML 5 history mode

1 Answers1