React应用部署至IIS服务器后刷新页面报404错误如何解决

React是基于客户端路由的单页应用，路由切换完全由浏览器端的JS通过History API控制，首次访问站点根路径时IIS能正常返回入口文件index.html，后续前端路由跳转不会向服务器发送对应子路径的资源请求。但按F5刷新时，浏览器会直接向IIS请求当前地址栏路径对应的物理文件，IIS在站点目录下找不到对应路径的文件/目录，就会直接返回404错误。

前置检查 #

• 首先确认IIS已安装**URL重写（URL Rewrite）**模块，该模块是IIS实现路径重写的依赖，未安装的话后续配置的规则不会生效。
• 确认web.config文件放在站点根目录，和React打包生成的index.html文件处于同一层级。

写入正确的重写规则 #

将web.config的内容替换为以下配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA Route Rewrite" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <!-- 跳过真实存在的文件请求 -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <!-- 跳过真实存在的目录请求 -->
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- 如果有同域部署的/api开头后端接口，跳过这部分请求让其正常走后端逻辑，没有可删除该行 -->
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <!-- 所有符合条件的请求统一重写到入口文件，交给前端路由处理 -->
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• 如果你的React应用不是部署在站点根目录，而是部署在子路径下（比如https://domain.com/myapp），需要将规则中url="/index.html"修改为对应子路径的入口地址，即url="/myapp/index.html"，同时要保证React打包时配置的basename和部署子路径一致。
• 配置保存后重启对应IIS站点，再刷新子路由页面就不会出现404问题。
• 不要通过自定义404错误页跳转到index.html的方式解决问题，这种方式会先返回404状态码，影响SEO和接口异常判断，URL重写的方式会正常返回200状态码，符合SPA的运行逻辑。

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