Blazor项目发布至Azure后出现大量报错问题排查

问题场景 #

Blazor Web应用本地运行完全正常，但发布到Azure后出现一系列报错，核心报错日志如下：

[2024-02-28T15:18:57.082Z] Information: Normalizing '_blazor' to 'https://blazorenigmaweb.azurewebsites.net/_blazor'.
dotnet.runtime.8.0.2.08ksuqn0ht.js:3 MONO_WASM: The version of dotnet.runtime.js is different from the version of dotnet.js!
pt @ dotnet.runtime.8.0.2.08ksuqn0ht.js:3
dotnet.runtime.8.0.2.08ksuqn0ht.js:3 MONO_WASM: The version of dotnet.native.js is different from the version of dotnet.js!
pt @ dotnet.runtime.8.0.2.08ksuqn0ht.js:3
blazorenigmaweb.azurewebsites.net/:1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' with computed SHA-256 integrity 'dqpunZywlYy86b4O6ZjONasmG+4FH0P17FZ0OIf/lIg='. The resource has been blocked.
blazorenigmaweb.azurewebsites.net/:1 Unknown error occurred while trying to verify integrity.
dotnet.js:3 Uncaught (in promise) TypeError: Failed to fetch
    at Object.S [as fetch_like] (dotnet.js:3:4466)
    at dotnet.js:3:11710
    at dotnet.js:3:11726
blazorenigmaweb.azurewebsites.net/:1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' with computed SHA-256 integrity 'dqpunZywlYy86b4O6ZjONasmG+4FH0P17FZ0OIf/lIg='. The resource has been blocked.
blazorenigmaweb.azurewebsites.net/:1 Unknown error occurred while trying to verify integrity.
dotnet.js:3 Uncaught (in promise) TypeError: Failed to fetch
    at Object.S [as fetch_like] (dotnet.js:3:4466)
    at dotnet.js:3:11710
    at dotnet.js:3:11726
blazor.web.js:1 [2024-02-28T15:18:58.257Z] Warning: Failed to connect via WebSockets, using the Long Polling fallback transport. This may be due to a VPN or proxy blocking the connection. To troubleshoot this, visit https://aka.ms/blazor-server-using-fallback-long-polling.
log @ blazor.web.js:1
blazorenigmaweb.azurewebsites.net/:1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' with computed SHA-256 integrity 'dqpunZywlYy86b4O6ZjONasmG+4FH0P17FZ0OIf/lIg='. The resource has been blocked.
blazorenigmaweb.azurewebsites.net/:1 Unknown error occurred while trying to verify integrity.
blazor.web.js:1 Error in mono_download_assets: Error: download 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' for dotnet.native.wasm failed 0 TypeError: Failed to fetch
Rr @ blazor.web.js:1
dotnet.js:3 Uncaught (in promise) TypeError: Failed to fetch
    at Object.S [as fetch_like] (dotnet.js:3:4466)
    at dotnet.js:3:11710
    at dotnet.js:3:11726
4dotnet.js:3 Uncaught (in promise) Error: download 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' for dotnet.native.wasm failed 0 TypeError: Failed to fetch
    at dotnet.js:3:10097
    at async Y (dotnet.js:3:8985)
    at async G (dotnet.js:3:8833)
dotnet.runtime.8.0.2.08ksuqn0ht.js:3 Uncaught (in promise) Error: download 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' for dotnet.native.wasm failed 0 TypeError: Failed to fetch
    at dotnet.js:3:10097
    at async Y (dotnet.js:3:8985)
    at async G (dotnet.js:3:8833)
2blazorenigmaweb.azurewebsites.net/:1 Uncaught (in promise) Error: download 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' for dotnet.native.wasm failed 0 TypeError: Failed to fetch
    at dotnet.js:3:10097
    at async Y (dotnet.js:3:8985)
    at async G (dotnet.js:3:8833)
blazor.web.js:1 Uncaught (in promise) Error: download 'https://blazorenigmaweb.azurewebsites.net/_framework/dotnet.native.wasm' for dotnet.native.wasm failed 0 TypeError: Failed to fetch
    at dotnet.js:3:10097
    at async Y (dotnet.js:3:8985)
    at async G (dotnet.js:3:8833)

核心报错原因 #

1. Runtime版本不匹配：dotnet.runtime.js、dotnet.native.js与dotnet.js版本不一致，导致加载时版本校验失败。
2. Subresource Integrity（SRI）校验失败：浏览器计算的dotnet.native.wasm哈希值与页面中integrity属性指定的哈希不匹配，资源被浏览器拦截。
3. 资源下载失败：由于SRI拦截或版本不匹配，dotnet.native.wasm无法正常下载，导致Blazor应用无法初始化。
4. WebSocket连接降级：WebSocket连接失败， fallback到长轮询，虽不直接导致崩溃，但可能影响应用性能和交互体验。

解决方案 #

• 清理Azure部署缓存：登录Azure门户，进入对应App Service的高级工具（Kudu），打开CMD或PowerShell，删除site\wwwroot目录下的所有文件，然后重新发布项目。
• 确保发布版本一致性：本地开发和发布使用相同版本的.NET SDK，避免混合不同版本的runtime文件。可在项目的.csproj文件中指定固定SDK版本：

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <RuntimeFrameworkVersion>8.0.2</RuntimeFrameworkVersion>
  </PropertyGroup>
  

• 禁用SRI校验：如果SRI是主要问题，可在项目中禁用。对于Blazor WebAssembly，在.csproj中添加配置：

  <PropertyGroup>
    <BlazorWebAssemblyEnableSubresourceIntegrity>false</BlazorWebAssemblyEnableSubresourceIntegrity>
  </PropertyGroup>
  

• 检查Azure静态资源配置：确保Azure App Service的静态资源缓存策略没有篡改dotnet.native.wasm文件，可在配置 -> 应用程序设置中调整静态内容缓存规则。
• 启用WebSockets：进入Azure App Service的配置 -> 通用设置，确保WebSockets选项设置为启用，恢复Blazor Server的默认传输方式。

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