IIS 10配置URL重写代理CDN SVG文件解决CORS问题失败求助

问题背景 #

我们团队维护的混合前端应用包含ASP.NET、React和Angular模块，需要从CDN拉取SVG sprite文件，直接请求时触发了CORS问题。尝试通过IIS 10配置反向代理，让文件请求看起来来自应用服务器，但当前配置未生效，图标无法正常显示（已确认CDN上文件路径完全正确）。

现有配置 #

前端调用代码 #

<svg width="100" height="100" class="sprite">
   <use href="./cdn/0.0.1/alpha/common/images/webicons/Sprite.svg#icon-name" />
</svg>

IIS web.config 重写规则 #

<rewrite>
    <rules>
        <rule name="CDN Proxy" stopProcessing="true">
            <match url="^cdn/(.*)" />
            <action type="Rewrite" url="https://[CDN URL]/cdncontainer/{R:1}" appendQueryString="true" logRewrittenUrl="true" />
        </rule>
    </rules>
</rewrite>

核心需求 #

• SVG sprite文件必须从CDN拉取，禁止托管到应用服务器
• 应用服务器无法迁移到CDN同域名下

解决方案 #

1. 安装并启用IIS代理组件 #

仅配置URL重写规则无法实现反向代理，必须先安装URL重写模块和应用程序请求路由（ARR），并开启代理功能：

• 打开IIS管理器，选中服务器节点
• 找到「应用程序请求路由」，进入后点击左侧「服务器代理设置」
• 勾选「启用代理」，保存配置

2. 修正重写规则（添加代理与响应头处理） #

原规则仅做了URL重写，缺少代理转发的关键配置和响应头处理，替换为以下配置：

<rewrite>
    <rules>
        <rule name="CDN Proxy" stopProcessing="true">
            <match url="^cdn/(.*)" />
            <action type="Rewrite" url="https://[CDN URL]/cdncontainer/{R:1}" appendQueryString="true" logRewrittenUrl="true" />
            <!-- 处理编码与请求头，避免代理时的内容编码问题 -->
            <serverVariables>
                <set name="HTTP_X_ORIGINAL_ACCEPT_ENCODING" value="{HTTP_ACCEPT_ENCODING}" />
                <set name="HTTP_ACCEPT_ENCODING" value="" />
            </serverVariables>
        </rule>
    </rules>
    <!-- 修正SVG响应头，移除CDN跨域头 -->
    <outboundRules>
        <rule name="Set SVG Content-Type" preCondition="IsSVGFile">
            <match serverVariable="RESPONSE_Content-Type" pattern=".*" />
            <action type="Rewrite" value="image/svg+xml" />
        </rule>
        <rule name="Remove CDN CORS Headers" preCondition="IsSuccessfulProxy">
            <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern=".*" />
            <action type="Rewrite" value="" />
        </rule>
        <preConditions>
            <preCondition name="IsSVGFile">
                <add input="{REQUEST_URI}" pattern="\.svg$" />
            </preCondition>
            <preCondition name="IsSuccessfulProxy">
                <add input="{RESPONSE_STATUS}" pattern="200" />
            </preCondition>
        </preConditions>
    </outboundRules>
</rewrite>

3. 验证配置有效性 #

• 打开Edge开发者工具的网络标签，发起SVG sprite请求，检查状态码是否为200
• 确认响应头中Content-Type为image/svg+xml，且无CDN的Access-Control-Allow-Origin字段
• 查看响应内容，确认是完整的SVG sprite文件

4. 前端路径优化（可选） #

将相对路径改为绝对路径，避免不同模块下的路径解析错误：

<svg width="100" height="100" class="sprite">
   <use href="/cdn/0.0.1/alpha/common/images/webicons/Sprite.svg#icon-name" />
</svg>

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