React单页应用IIS环境下HTTP转HTTPS及index.html重定向配置咨询

Hey there! Let's sort out your IIS config for your React SPA. You'll need two key rewrite rules in your web.config—one to force all HTTP traffic to HTTPS, and another to handle React's client-side routing by redirecting all non-file/directory requests to index.html. Here's the full setup, broken down clearly:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- Redirect all HTTP requests to HTTPS -->
        <rule name="HTTP to HTTPS Redirect" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
            <add input="{HTTPS}" pattern="off" ignoreCase="true" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
        </rule>

        <!-- Handle React SPA routing (fallback to index.html) -->
        <rule name="React SPA Fallback" 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>

    <!-- Optional: Ensure static assets are served correctly -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".map" mimeType="application/json" />
      <mimeMap fileExtension=".jsx" mimeType="text/javascript" />
    </staticContent>
  </system.webServer>
</configuration>

What Each Rule Does #

1. HTTP → HTTPS Redirect #

• This rule checks if the incoming request uses HTTP ({HTTPS} is set to "off").
• When triggered, it sends a permanent 301 redirect to the same URL but over HTTPS. The {R:1} captures the original path/query string, so users don't lose their place when switching protocols.
• stopProcessing="true" makes sure no other rules run after this redirect, which keeps things efficient.

2. React SPA Fallback Rule #

• React apps use client-side routing, so if a user refreshes a route like /profile or directly navigates to it, IIS would normally return a 404 (since there's no physical file for that path).
• This rule skips actual files/directories (so your CSS, JS, images, etc., still load normally) and rewrites all other requests to index.html. This lets React's router take over and render the correct component for the requested route.

Important Notes #

• Make sure the IIS URL Rewrite Module is installed on your server. If it's missing, you can install it via the IIS Manager (look under "Modules") or the Microsoft Web Platform Installer.
• Using redirectType="Permanent" is ideal for production—it tells search engines to update their indexes to use HTTPS, which helps with SEO. If you need a temporary redirect for testing, swap it for Temporary.
• The optional staticContent section adds MIME types for common React-related files, preventing IIS from returning incorrect content types for assets like JSON configs or source maps.

内容的提问来源于stack exchange，提问作者Shiva Wahi