React Router Dom 5下IIS服务器静态文件下载的web.config配置

场景说明：

• 根路径部署基于react-router-dom 5的单页应用
• /files/目录为服务器静态文件存储路径，用于文件下载
• 当前web.config的路由规则会导致/files/下的文件偶尔因缓存或路由处理逻辑出现404，无法正常下载

修改后的web.config配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 优先处理/files/目录下的请求，直接返回静态文件 -->
        <rule name="Files Directory Access" stopProcessing="true">
          <match url="^files/(.*)" />
          <action type="Rewrite" url="/files/{R:1}" />
        </rule>
        <!-- 原有静态资源规则 -->
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <!-- React路由规则，仅处理非文件/非目录的请求 -->
        <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>

关键修改说明： #

• 新增Files Directory Access规则并放在最顶部：IIS重写规则按顺序执行，这条规则会优先匹配所有以files/开头的请求，直接重写到对应文件路径并停止后续规则处理，避免请求被React路由规则捕获。
• 保留原有静态资源和React路由规则：确保单页应用的静态资源加载和路由跳转功能正常运行。

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