IIS同一URL部署ReactJS前端与ASP.NET Core后端无法访问后端接口

现有配置的核心问题 #

• 路径匹配规则覆盖不全：当前规则仅能匹配fsapi/xxx/xxx格式的两段层级路径，超过两段、带特殊字符、带路径参数的API请求都无法命中规则
• 转发目标缺少协议前缀：重写目标直接写localhost:444，IIS无法识别这是跨站点转发请求，会当作同站点内的路径处理，直接导致502错误
• 多余冗余判断：已经通过match url匹配路径，不需要额外加PATH_INFO的条件判断
• 关闭了查询字符串追加：API请求携带的查询参数会被丢弃，不符合常规接口调用需求
• 重写动作不适用于跨端口转发：IIS原生Rewrite仅用于同站点内的路径重写，跨端口/跨域名转发需要依赖ARR反向代理能力

前置依赖检查 #

• 确认IIS已经安装「URL重写模块」和「应用程序请求路由(ARR)」模块
• 打开IIS根节点的Application Request Routing Cache功能，右侧点击「Server Proxy Settings」，勾选Enable proxy后保存配置

修正后的重写规则 #

<rules>
    <clear />
    <rule name="转发fsapi请求到后端服务" stopProcessing="true">
        <match url="^fsapi/(.*)" ignoreCase="true" />
        <action type="Rewrite" url="http://localhost:444/{R:1}" appendQueryString="true" logRewrittenUrl="true" />
    </rule>
    <rule name="React路由适配">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
            <add input="{REQUEST_URI}" pattern="^/fsapi/" negate="true" />
            <add input="{HTTP_METHOD}" pattern="^GET$" />
            <add input="{HTTP_ACCEPT}" pattern="^text/html" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" appendQueryString="false" />
    </rule>
</rules>

适配调整说明 #

• 如果你的ASP.NET Core后端接口本身已经包含/fsapi/前缀，把转发规则的url改为http://localhost:444/{R:0}即可，不用截断前缀
• 如果444端口的后端服务用的是HTTPS协议，把http://localhost:444替换为https://localhost:444，如果是自签名证书，需要在ARR代理设置中关闭SSL证书校验，避免握手失败
• 配置完成后先本地直接访问localhost:444的接口确认服务运行正常，再测试通过443端口转发的请求

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