Angular应用不同环境下相同请求返回不同HttpStatus的原因

差异产生的核心原因 #

本地开发环境（ng serve）的行为 #

1. 请求头区分处理：Angular开发服务器会根据请求的Accept头判断请求类型：
   • 浏览器请求时，Accept头默认包含text/html，服务器会将无法匹配到静态资源的请求转发到index.html，随后Angular客户端路由触发**规则重定向到首页。
   • Postman请求图片时，Accept头为image/jpeg（或对应图片格式），服务器直接检查静态文件是否存在，不存在则返回404，不会转发到index.html。
2. 静态资源优先级：开发服务器优先处理assets目录下的静态资源请求，只有非静态资源路由才会触发SPA转发逻辑。

Azure部署环境的行为 #

Azure上的静态Web Apps或App Service（IIS）默认配置会将所有请求无条件转发到index.html，不区分请求的资源类型或Accept头：

• 浏览器访问时，拿到index.html后执行Angular JS代码，触发客户端路由重定向到首页。
• Postman请求时，直接返回index.html内容和200状态码（因为服务器不会执行JS，无法触发客户端路由重定向）。

解决你的需求（不存在图片返回404） #

要让不存在的图片返回404，需要修改Azure服务器的路由规则，优先处理静态资源请求，仅当请求非静态资源且不存在时才转发到index.html。

方案1：Azure Static Web Apps #

在项目根目录创建staticwebapp.config.json，添加以下规则：

{
  "routes": [
    // 优先处理assets/images下的静态资源，不存在则返回404
    {
      "route": "/assets/images/*",
      "serve": "/assets/images/{*path}",
      "statusCode": 404
    },
    // 其他路由转发到index.html，维持SPA路由
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

方案2：Azure App Service（IIS） #

修改项目根目录的web.config文件，添加重写规则：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 优先返回存在的静态文件/目录 -->
        <rule name="Serve Existing Static Files" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" />
          </conditions>
          <action type="None" />
        </rule>
        <!-- 对assets/images下不存在的文件返回404 -->
        <rule name="Missing Image 404" stopProcessing="true">
          <match url="^assets/images/(.*)$" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="CustomResponse" statusCode="404" statusReason="Not Found" />
        </rule>
        <!-- 其他非静态资源请求转发到index.html，维持SPA路由 -->
        <rule name="SPA Routing" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

效果验证 #

修改配置重新部署后：

• 浏览器访问不存在的图片：服务器返回404，此时你可以通过Angular的全局错误拦截或图片的onerror事件显示替代图片。
• Postman请求不存在的图片：返回404状态码，你的C#后端检查接口可以正常工作。

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