React应用部署至IIS服务器后路由访问出现蓝屏求助

一、先查IIS配置 #

• 核对web.config的URL重写规则，React单页应用必须把所有路由请求转发到index.html，正确配置示例：

<rewrite>
  <rules>
    <rule name="React 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>

• 确认IIS已安装URL重写模块，没装的话通过服务器管理器添加该组件。
• 检查站点物理路径是否指向React构建后的build目录，同时给该目录配置正确权限，确保IIS应用池身份能读取目录内容。

二、路由与认证逻辑排查 #

• 看index.js里的路由配置，要是用了BrowserRouter，IIS必须配URL重写；嫌麻烦的话可以换成HashRouter，但URL会带#后缀。
• 检查auth.js里的认证逻辑，有没有未处理的错误——比如Promise拒绝、访问null/undefined值，这类问题会直接导致页面崩溃。给全局加个错误捕获，方便定位：

// 在index.js里加全局错误监听
window.addEventListener('error', (e) => {
  console.error('全局错误:', e.error);
});

window.addEventListener('unhandledrejection', (e) => {
  console.error('未处理的Promise拒绝:', e.reason);
});

• 确认路由守卫（比如PrivateRoute）的逻辑，别出现未认证时无限重定向的情况，这也会导致页面卡死蓝屏。

三、其他排查动作 #

• 清掉浏览器缓存再访问，避免旧静态资源冲突。
• 打开浏览器开发者工具控制台，看具体报错信息——蓝屏基本都是前端致命错误导致的，控制台日志是关键。
• 查IIS日志（一般在C:\inetpub\logs\LogFiles），看请求的状态码和错误详情，确认是不是服务器端问题导致页面加载失败。

内容的提问来源于stack exchange，提问作者Leonardo Henrique da Silva