Windows Server IIS部署React应用时/api路由失效及web.config XML错误求助

解决建议 #

• 补全web.config完整XML结构
  你当前仅提供了<system.webServer>片段，缺少IIS要求的标准web.config根节点声明，这是XML格式报错的核心原因。替换为完整的配置内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <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" />
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                  </conditions>
               <action type="Rewrite" url="/" />
          </rule>
       </rules>
     </rewrite>
  </system.webServer>
</configuration>

• 确认web.config放置路径
  确保你修改的web.config在执行npm run build后会被输出到build目录根目录，最终和index.html同级放置在IIS的wwwroot目录下，不要错位存放。
• 排查XML编码问题
  编辑web.config不要使用系统自带记事本，避免保存时生成BOM头或者编码异常，推荐用VS Code编辑，保存为UTF-8无BOM格式，确认所有标签正确闭合没有语法错误。
• 验证API路由配套配置
  你当前的重写规则已经配置了忽略/api前缀的请求，不会把/api请求转发到React入口。如果你的/api指向独立的后端服务，还需要在IIS安装Application Request Routing（ARR）组件并开启反向代理，配置/api对应的转发规则到后端服务地址。
• 重启站点生效
  修改完配置后在IIS管理器中重启对应站点，清除浏览器缓存后再访问测试。

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