Angular部署IIS：无效文件请求返回200而非404问题求助

我为Angular 17应用配置了如下IIS的web.config重写规则：

<rule name="Angular" stopProcessing="true">
    <match url="^(?!^bff).*" />
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/" />
</rule>

当前异常表现：

• 存在的文件请求（如http://domain/svg/fileexist.svg）返回200 OK，符合预期；
• 不存在的文件请求（如http://domain/svg/filenotexisit.svg）也返回200 OK，导致应用挂起无法正常响应。

预期效果：

• 合法文件/目录请求正常返回200；
• 无效文件/目录请求返回404状态码。

补充现象：本地运行Angular应用时行为正常，部署到IIS并使用上述规则后出现该问题。

问题根源在于当前规则会把所有非文件、非目录且非bff开头的请求都重写到根路径，包括不存在的静态文件请求，导致Angular接管请求并返回200。以下是几种可行的调整方案：

方案1：排除静态文件后缀，让IIS直接处理静态请求 #

修改重写规则，仅对非静态文件后缀的路由请求进行重写，静态文件请求直接由IIS处理，不存在的文件自然返回404：

<rule name="Angular Routes" stopProcessing="true">
    <match url="^(?!bff).*" />
    <!-- 可根据项目实际使用的静态文件后缀补充 -->
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{URL}" pattern="\.(svg|png|jpg|jpeg|gif|css|js|ico|woff|woff2|ttf|eot)$" negate="true" />
    </conditions>
    <action type="Rewrite" url="/" />
</rule>

方案2：前置规则拦截特定目录的无效文件请求 #

针对静态文件目录（如svg/、assets/）添加前置规则，直接对不存在的文件返回404：

<!-- 先处理静态目录的无效请求，返回404 -->
<rule name="Static Files 404" stopProcessing="true">
    <match url="^svg/.*$" /> <!-- 替换为你的静态文件目录 -->
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    </conditions>
    <action type="CustomResponse" statusCode="404" statusReason="Not Found" statusDescription="The requested file does not exist." />
</rule>

<!-- 保留原Angular路由重写规则 -->
<rule name="Angular" stopProcessing="true">
    <match url="^(?!^bff).*" />
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/" />
</rule>

方案3：配置IIS自定义404兜底 #

在web.config中添加httpErrors配置，确保IIS在处理不存在的资源时返回正确的404响应，同时可搭配自定义404页面：

<system.webServer>
    <!-- 其他配置项 -->
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/404.html" responseMode="File" />
    </httpErrors>
</system.webServer>

需注意在Angular项目中创建404.html静态文件，并确保打包后能被IIS访问到；也可让Angular路由接管404页面，但需配合前面的规则避免路由请求被误判为404。

本地开发服务器会自动区分静态文件请求和路由请求：静态文件不存在时返回404，路由请求则由Angular路由系统处理。但IIS的默认重写规则会将所有非文件/目录的请求转发到根路径，导致不存在的静态文件请求被Angular接管，从而返回200（根组件加载成功）。调整规则后，让静态文件请求直接由IIS处理，即可恢复正常的404响应逻辑。

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