Http to https redirect for React on IIS

Question

I am trying to get a React app on IIS to redirect to https for everything. It is not working at the moment. I can access the application and assets through http and https, but the former won't redirect to the latter.

This is what I started with:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|json|js|css|png|gif|jpg|jpeg|map))" />
          <action type="Rewrite" url="/{R:1}" />
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Here is what I have so far:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="^(http|https):\/\/([\S]+[.](html|htm|svg|json|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="https://{R2}" logRewrittenUrl="true" />
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url="^(http|https):\/\/(.*)\/(.*)" />
          <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="https://{R2}/index.html" logRewrittenUrl="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Anastasia Evgenia Alexandri · Accepted Answer · 2022-07-06 13:56:09Z

I leave this here and I hope it helps someone. It took me hours to find a solution. With the web.config bellow, I can rewrite to index.html and redirect to HTTPS. This works for deeper urls too.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="HTTPS Redirect" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{HTTPS}" pattern="^OFF$" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" />
                </rule>
                <rule name="ReactRouter Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.html" />
                </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration>

Brando Zhang · Accepted Answer · 2019-03-27 08:41:05Z

0

According to your description, I found you use rewrite instead of the redirect. Since the rewrtie will not redirect from http to https, you feel your rule is not working.

I suggest you could try to use below rule.

<rule name="ReactRouter Routes" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Redirect" url="https://www.sample1.com/index.html" logRewrittenUrl="true" />
                </rule>
                <rule name="Force https" enabled="true" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{HTTPS}" pattern="off" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="true" redirectType="Permanent" />
                </rule>

answered Mar 27, 2019 at 8:41

Brando Zhang

29.1k6 gold badges42 silver badges71 bronze badges

3 Comments

codedog Over a year ago

Thanks, I have tried doing the force redirect like that before. Unfortunately it is not redirecting deeper URLs, e.g. http://example.com/users. It only works on http://example.com redirect to https://example.com

Brando Zhang Over a year ago

Could you please share your current url rewrite rule? It seems there is something wrong with your match url pattern.

codedog Over a year ago

I tried almost exactly as you have written there, except changing https://www.sample1.com/index.html to https://{HTTP_HOST}/index.html. It gave a 500 error,

Collectives™ on Stack Overflow

Http to https redirect for React on IIS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related