部署React+Express.js应用到IIS服务器时路由失败问题求助

我有一个基于Create-React-app+Redux的React前端，搭配Node.js（Express.js）后端。开发环境下，前端package.json中设置"proxy": "http://localhost:5000"将API请求转发至监听5000端口的后端，通过concurrently同时运行前后端，所有路由均正常工作。

前端配置 #

client文件夹的package.json配置：

{
  ...,
  "proxy": "http://localhost:5000"
}

App.js中使用react-router-dom配置了多路由（如/home、/dashboard等）。

后端配置 #

根目录AAQCS的package.json脚本：

{
  ...,
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js --ignore temp/",
    "client": "npm start --prefix client",
    "clientinstall": "npm install -prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "devDependencies": {
    "concurrently": "^6.0.2",
    "nodemon": "^2.0.19"
  }
}

web-server.js中，Express服务监听5000端口，配置了静态文件服务及/api/users、/api/auth等后端路由，同时托管React构建文件。

IIS部署问题 #

当前web.config的URL Rewrite规则如下：

<rules>
    <clear />
    <rule name="RedirectToBackend" stopProcessing="true">
        <match url="^api/(.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="Redirect" url="http://localhost:5000/api/{R:1}" />
    </rule>
    <rule name="React Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
            <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="Redirect" url="{R:0}" />
    </rule>
</rules>

部署到IIS后，可正常打开登录页，但点击登录按钮时出现错误："POST http://localhost:3000/api/auth 500 (URL Rewrite Module Error.)"

疑问 #

1. 当前web.config中的路由规则是否存在错误？
2. 如何配置规则实现：所有/api/xxxx格式的请求转发至localhost:5000后端，其他请求遵循React前端路由？

1. 现有规则的错误点 #

• 重定向类型误用：第一个规则使用Redirect（重定向），会让浏览器地址栏直接跳转到localhost:5000，这不符合生产环境反向代理的需求，不仅暴露后端端口，还会引发跨域或URL重写模块错误，是导致500报错的核心原因。
• React路由规则无效：第二个规则的Redirect操作没有意义，React单页应用需要将非文件/非目录的请求重写到index.html，而非重定向到原URL，否则会陷入请求循环或返回无效响应。

2. 正确的web.config路由规则配置 #

将规则修改为反向代理（Rewrite）模式，同时确保React路由正确 fallback 到index.html，配置如下：

<rules>
    <clear />
    <!-- 代理所有/api开头的请求到后端服务 -->
    <rule name="ProxyAPI" stopProcessing="true">
        <match url="^api/(.*)" />
        <action type="Rewrite" url="http://localhost:5000/api/{R:1}" />
        <!-- 配置反向代理的服务器变量，避免编码问题 -->
        <serverVariables>
            <set name="HTTP_X_ORIGINAL_ACCEPT_ENCODING" value="{HTTP_ACCEPT_ENCODING}" />
            <set name="HTTP_ACCEPT_ENCODING" value="" />
        </serverVariables>
    </rule>
    <!-- React单页应用路由 fallback 到index.html -->
    <rule name="ReactRoutes" 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="/index.html" />
    </rule>
</rules>

额外注意事项 #

• 确保IIS已安装URL Rewrite模块和Application Request Routing (ARR) 模块，ARR是实现反向代理的必要组件，未安装则代理规则失效。
• 确认后端服务在服务器上正常运行，监听localhost:5000端口，且服务器防火墙未拦截该端口的内部请求。
• 前端构建后的静态文件需部署到IIS站点的物理路径下，建议关闭后端的静态文件托管，避免资源访问冲突。

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