Angular应用在IIS上配置反向代理的问题求助

问题背景 #

宿主Angular应用部署在http://192.168.1.104:8081，远程微前端应用部署在http://192.168.1.104:8080。本地开发时使用proxy.config.json可正常代理资源，但部署到IIS后，请求返回200状态码却无法显示图片资源。

本地有效配置（proxy.config.json）：

{
  "/assets/nahal": {
    "target": "http://localhost:4202",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/fonts": "/assets/nahal/fonts"
    }
  }
}

本地启动命令：ng serve --proxy-config proxy.conf.json

当前IIS配置（web.config）：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <proxy enabled="true" />
    <rewrite>
      <rules>
        <rule name="Reverse Proxy to remote app" stopProcessing="true">
          <match url="^assets/nahal/(.*)" />
          <action type="Rewrite" url="http://192.168.1.104:8080/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

问题原因 #

1. 未实现本地配置中的pathRewrite规则，导致字体等资源路径映射错误
2. 缺少changeOrigin对应的配置，远程服务器可能返回错误的资源路径或拒绝跨源请求
3. 未确保IIS的Application Request Routing（ARR）模块正确启用

修正后的web.config配置 #

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <!-- 需先安装ARR模块以启用代理 -->
    <proxy enabled="true" preserveHostHeader="false" reverseRewriteHostInResponseHeaders="true" />
    <rewrite>
      <rules>
        <!-- 主代理规则：映射/assets/nahal下的资源到远程服务 -->
        <rule name="Reverse Proxy to Remote App" stopProcessing="true">
          <match url="^assets/nahal/(.*)" />
          <action type="Rewrite" url="http://192.168.1.104:8080/{R:1}" />
          <!-- 模拟changeOrigin，传递原始请求头 -->
          <serverVariables>
            <set name="HTTP_X_ORIGINAL_HOST" value="{HTTP_HOST}" />
            <set name="HTTP_X_ORIGINAL_ACCEPT_ENCODING" value="{HTTP_ACCEPT_ENCODING}" />
          </serverVariables>
        </rule>
        <!-- 处理pathRewrite：映射/fonts开头的请求到远程的/assets/nahal/fonts -->
        <rule name="Rewrite Font Paths" stopProcessing="true">
          <match url="^fonts/(.*)" />
          <action type="Rewrite" url="http://192.168.1.104:8080/assets/nahal/fonts/{R:1}" />
        </rule>
      </rules>
      <!-- 出站规则：修正远程返回的资源路径，确保前端能正确识别 -->
      <outboundRules>
        <rule name="Fix Remote Resource Paths" preCondition="IsHTML">
          <match filterByTags="A, Area, Base, Form, Frame, Head, IFrame, Img, Input, Link, Script" pattern="http://192.168.1.104:8080/(.*)" />
          <action type="Rewrite" value="/assets/nahal/{R:1}" />
        </rule>
        <preConditions>
          <preCondition name="IsHTML">
            <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
          </preCondition>
        </preConditions>
      </outboundRules>
    </rewrite>
    <!-- 确保静态资源MIME类型正确，避免资源无法解析 -->
    <staticContent>
      <mimeMap fileExtension=".png" mimeType="image/png" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>

关键配置说明 #

• ARR模块启用：需先在IIS中安装Application Request Routing模块，可通过IIS管理器的「管理模块」确认是否安装
• ChangeOrigin模拟：通过serverVariables传递原始请求头，让远程服务器识别请求来自宿主域名
• 路径修正：通过入站规则实现本地pathRewrite的字体映射逻辑，出站规则修正远程返回的资源路径，避免前端加载错误
• MIME类型配置：显式声明图片、字体等资源的MIME类型，防止IIS返回错误的Content-Type导致资源无法显示

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