Azure Linux Web App 部署 Angular PWA 出现 .webmanifest 加载报错如何解决

根因说明 #

• .webmanifest后缀的请求没有被当成静态资源处理，命中了Angular SPA的路由回退逻辑，返回了index.html的内容，是触发manifest语法错误的核心原因。你之前配置的MIME类型规则要么顺序不对，要么优先级低于SPA回退规则，没有生效。
• 部分Azure Linux Web App默认的静态资源加载规则和项目配置冲突也会触发该问题。

具体修复步骤 #

第一步：调整ASP.NET Core中间件顺序&补充规则 #

确保UseStaticFiles的执行顺序在UseSpa/路由配置之前，同时补充PWA相关资源的匹配规则，代码如下：

// 先配置静态文件规则
FileExtensionContentTypeProvider provider = new FileExtensionContentTypeProvider();
// 必须用application/manifest+json作为.webmanifest的MIME类型
provider.Mappings[".webmanifest"] = "application/manifest+json";
// 可选：补充PWA相关其他静态资源的MIME配置
provider.Mappings[".json"] = "application/json";
provider.Mappings[".js"] = "application/javascript";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider,
    ServeUnknownFileTypes = false,
    // 如果Angular打包文件放在wwwroot的子目录，可通过下面参数指定路径
    // FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "你的Angular打包目录名")),
});

// 后配置SPA路由回退规则
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "你Angular项目的本地目录名，比如ClientApp";
    // 核心：排除PWA相关资源不进入路由回退，同时配置缓存规则
    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
    {
        ContentTypeProvider = provider,
        OnPrepareResponse = ctx =>
        {
            var path = ctx.Context.Request.Path.Value;
            if (path.EndsWith(".webmanifest") || path.EndsWith("ngsw-worker.js") || path.EndsWith("ngsw.json"))
            {
                ctx.Context.Response.Headers["Cache-Control"] = "no-cache, no-store, must-revalidate";
            }
        }
    };
});

第二步：配置Azure Linux Web App启动参数 #

如果调整代码后仍未生效，需要在Azure侧强制指定静态资源加载路径：

1. 进入Azure Web App控制台 → 配置 → 常规设置 → 启动命令
2. 填入以下内容，把占位符替换为你项目的实际信息：

dotnet 你的项目发布后的dll文件名.dll --urls=http://0.0.0.0:80 --content-root /home/site/wwwroot

第三步：验证效果 #

部署更新后，打开Chrome开发者工具 → 应用面板 → 清单，查看manifest文件是否正常加载：响应头Content-Type为application/manifest+json，响应内容为实际的manifest JSON内容即为修复完成。

内容的提问来源于stack exchange，提问作者Superman.Lopez