为 blazor.webassembly.js 获取 404 NotFound（未找到 _framework 文件）

Posted 2023-03-27

【中文标题】为 blazor.webassembly.js 获取 404 NotFound（未找到 _framework 文件）

【英文标题】：Getting 404 NotFound for blazor.webassembly.js (_framework files not found)

【发布时间】：2021-05-14 13:50:10

【问题描述】：

我们沿着这条线搜索了其他问题，发现它们似乎适用于部署站点后。 尝试调试时，这会在 VS 2019 中发生。 到目前为止，我们检查的内容包括：

看起来是正确的applicationhost.config，虚拟目录路径确实是“客户端”应用程序的根目录 而 wwwroot 文件夹是物理路径的子文件夹。

 <site name="Eclypses.MTE.Protoype.Server" id="8">
    <application path="/" applicationPool="Eclypses.MTE.Protoype.Server AppPool">
      <virtualDirectory path="/" physicalPath="D:\git_src\mteutils_dotnetcore\eclypses-commander-prototype\Eclypses.MTE.Prototype\Client" />
    </application>
    <bindings>
      <binding protocol="http" bindingInformation="*:50413:localhost" />
    </bindings>
  </site>

我们在服务器启动时记录一条信息消息，它确实出现在我们的日志文件中。

客户端的launchsettings.json文件是：

  "iisSettings": 
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": 
      "applicationUrl": "http://localhost:50413",
      "sslPort": 0
    
  ,
  "profiles": 
    "IIS Express": 
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": 
        "ASPNETCORE_ENVIRONMENT": "Development"
      ,
      "use64Bit": true,
      "inspectUri": "wsProtocol://url.hostname:url.port/_framework/debug/ws-proxy?browser=browserInspectUri"
    ,
    "Eclypses.MTE.Prototype": 
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": 
        "ASPNETCORE_ENVIRONMENT": "Development"
      ,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "inspectUri": "wsProtocol://url.hostname:url.port/_framework/debug/ws-proxy?browser=browserInspectUri"
    
  

服务器的launchsettings.json文件是：

  "iisSettings": 
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": 
      "applicationUrl": "http://localhost:50413",
      "sslPort": 0
    
  ,
  "profiles": 
    "IIS Express": 
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": 
        "ASPNETCORE_ENVIRONMENT": "Development"
      ,
      "use64Bit": true,
      "inspectUri": "wsProtocol://url.hostname:url.port/_framework/debug/ws-proxy?browser=browserInspectUri"
    ,
    "Eclypses.MTE.Prototype.Server": 
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": 
        "ASPNETCORE_ENVIRONMENT": "Development"
      ,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "inspectUri": "wsProtocol://url.hostname:url.port/_framework/debug/ws-proxy?browser=browserInspectUri"
    
  

通过取消选中属性页上的“启用 SSL”复选框，我们将两者上的 sslPort 更改为“0”。 （我们尝试使用 SSL 并得到同样的错误）。

我们还在服务器启动类中注释掉了这行：

// app.UseHttpsRedirection();

所以我们应该在 VS 2019（当前版本为 16.8.5）中运行纯 http 环境。

最后，我们确保客户端和服务器都使用最新版本的相应 NuGet 包： 客户：

<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="5.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.3" PrivateAssets="all" />
<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />

服务器：

  <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.3" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="5.0.3" />
    <PackageReference Include="Microsoft.IdentityModel.Tokens" Version="6.8.0" />
    <PackageReference Include="Serilog.AspNetCore" Version="3.4.0" />
    <PackageReference Include="Serilog.Enrichers.Thread" Version="3.1.0" />
    <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.8.0" />
    <PackageReference Include="System.Runtime.Caching" Version="5.0.0" />

csproj 文件使用以下 Sdk 和框架（在客户端上，我们尝试了两个 Sdk，结果相同）。 客户：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<!--Project Sdk="Microsoft.NET.Sdk.Web"-->
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
</Project>

服务器：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
</Project>

服务器的启动类按以下顺序配置：

    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
        app.UseWebAssemblyDebugging();
    
    else
    
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();
    // app.UseHttpsRedirection();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("index.html");
    );

客户端的 Program.cs 类按以下顺序配置：

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");

builder.Services
    .AddBlazoredModal()
    .AddOptions()
    .AddAuthorizationCore()
    .AddSingleton<ISessionStorageService, SessionStorageService>() // Wrapper around javascript session storage methods
    .AddScoped<IAuthService, AuthService>() // Wrapper around API calls to server to authenticate a login
    .AddScoped<AuthenticationStateProvider, MyWebAuthenticationStateProvider>() // Creates a user principal
    .AddSingleton<StateContainer>();  // Wrapper around some local "state" values

builder.Services.AddScoped(sp => new HttpClient  BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) );

await builder.Build().RunAsync();

在研究了多个帖子之后，我们认为需要检查以上内容。根据我们的理解，它们看起来是正确的，然而 我们仍然从 _framework 和 _content 文件夹加载任何内容时出现 404，更重要的是，"blazor.webassembly.js" 文件不存在？！？！？

当我们启动调试会话时，VS 中会出现一个图标 “脚本文件” 里面是一个图标 “本地主机：50413/js/sessionStorage.js” 因此，运行时似乎找到了 wwwroot，但没有“_framework”或“_content”文件夹，因此无法加载我的 blazor WASM 文件。 当我们终止调试会话时，此图标会消失。

另外，如果我们在 Chrome 中查看网络选项卡，我们会看到下载的 wwwroot 文件的内容带有“200”，但 blazor.webassembly.js（应该在 _framework 中）得到 404。

感谢您提供此处的任何指导，基本问题是“为什么我们会为 _framework 和 _content 文件获得“404”？

【问题讨论】：

你能不能确认你的调试启动项目是WASM Server项目。我可能错过了你所有的细节。基本上<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="5.0.3" /> 是要使用的库，使用app.UseBlazorFrameworkFiles(); 应该映射_Framework。当您启动应用程序时，如果您尝试直接访问 URL http://localhost:50413/_framework/blazor.webassembly.js，您会看到什么？

localhost:50413/_framework/blazor.webassembly.js 得到 404。我不仅将 Eclypses.MTE.Prototype.Server 作为我的启动项目（失败），而且我还单击了“服务器”项目并单击了“调试” “同样的失败。我在 blazor.webassembly.js 文件上仍然得到 404

app.UseBlazorFrameworkFiles();是服务器上我的 startup.cs 中的第 87 行

好的，找到问题并为其他人的利益发帖。似乎我的服务器项目以某种方式没有对我的客户的“项目参考”。我修复了这个问题，然后仔细检查了

【参考方案1】：

确保您的服务器包含对您的客户端的项目引用。 还要确保您的客户的 csproj 文件使用

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

【讨论】：

确保您的服务器包含对您的客户端的项目引用。确实如此。出于某种原因，VS 2022 RC 有时会在重启后忘记这一点。像任何其他项目参考一样添加，它再次工作。感谢您指出这一点。

【参考方案2】：

在我将 WASM 应用程序 .NET 5 移植到 .NET 6 之前，我曾遇到过这种情况。确保您已将 Microsoft.AspNetCore.Components.WebAssembly 和所有其他相关软件包更新到最新版本。

【讨论】：

这是我的问题，谢谢！