我之前帮同事排查过几乎一模一样的问题——React应用在非SSL端口跑的好好的，放到绑定了SSL的80端口就各种404、403，折腾了半天终于搞定了。结合你的场景（作为默认网站下的子Web应用托管），给你梳理几个关键的排查和修复步骤，你可以一步步来：

1. 先确认IIS的SSL绑定配置是否正确 #

首先得搞清楚80端口的绑定是不是真的和SSL证书配对好了：

• 打开IIS管理器，找到默认网站右键点「编辑绑定」
• 检查80端口的条目：类型是不是选了「https」？SSL证书是不是选了已经安装在服务器上的有效证书？
• 这里提个小建议：通常HTTPS默认用443端口，80是HTTP的默认端口，强行给80绑SSL可能会导致请求解析混乱，建议换成443试试，说不定问题直接解决了

2. 检查React构建产物的路径配置 #

React部署前必须用npm run build生成生产包，这里很容易踩坑：

• 因为你的React是默认网站下的子Web应用（比如https://your-domain.com/my-react-app），一定要在项目根目录的package.json里加上"homepage": "/my-react-app/"（把my-react-app换成你的实际应用名称），不然构建出来的资源路径会默认指向根目录，自然找不到，导致404
• 构建完后，把build文件夹里的所有文件直接复制到IIS对应子应用的目录里，别把整个build文件夹丢进去

3. 配置URL重写规则（这是SPA部署到IIS的核心！） #

React是单页应用，所有路由请求都得指向index.html，但IIS默认不认识这种逻辑，所以必须加URL重写：

• 先确认IIS装了URL重写模块：打开IIS管理器，看「功能视图」里有没有这个模块，没有的话去「管理」->「Web平台安装程序」里搜“URL Rewrite”安装
• 在你的React应用根目录（也就是IIS里子应用对应的目录）创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <!-- 给React需要的文件添加MIME类型，避免IIS不识别 -->
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".jsx" mimeType="text/javascript" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="React SPA Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <!-- 排除实际存在的文件和目录 -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- 如果你的应用有API接口，把API路径排除在这里，避免被重写到index.html -->
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <!-- 如果是子应用，这里要改成你的应用路径，比如 /my-react-app/index.html -->
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• 重点注意：如果是子Web应用，action里的url必须带上子应用名称，比如/my-react-app/index.html，不然重写会指向默认网站的根目录，肯定404

4. 排查权限问题（解决403的关键） #

403错误基本都是权限不够：

• 找到你的React应用在服务器上的目录，右键「属性」->「安全」标签
• 检查有没有IIS_IUSRS和IUSR这两个用户，如果没有就添加，然后给它们分配读取和执行的权限
• 另外，如果你的SSL证书是自签名的，记得在服务器上把它加入信任根证书颁发机构，不然可能会有请求拦截的问题（不过这个更多是浏览器警告，不一定直接导致403，但也可以排查下）

5. 检查端口占用和请求路径 #

• 打开命令提示符，执行netstat -ano | findstr :80，看看80端口是不是被其他程序（比如Apache、Tomcat或者其他IIS站点）占用了，如果是，要么换端口（比如443），要么停止占用的程序
• 打开浏览器开发者工具的「网络」标签，看看那些404的请求路径是什么——比如是不是请求的是/static/js/main.xxx.js，但实际你的资源在/my-react-app/static/js/main.xxx.js，这时候就是homepage配置错了，回去改package.json重新构建就行

如果这些步骤都试过还是没解决，你可以把浏览器网络请求的具体错误截图和IIS的日志片段贴出来，这样能更精准定位问题。

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