blazor.web assembly.js 出现 404 NotFound（_framework 文件未找到）

Question

我们沿着这条线搜索了其他问题，发现它们似乎适用于站点部署后。当尝试调试时，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 中运行纯 http 环境（目前版本为 16.8.5）。

最后，我们确保客户端和服务器都使用适当 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();

在研究了多个帖子后，以上内容是我们认为需要检查的内容。从我们的理解来看，它们看起来是正确的，但我们仍然收到 404 错误，从 _framework 和 _content 文件夹加载任何内容，更重要的是，“blazor.web assembly.js”文件不存在？！？！？

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

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

感谢这里的任何指导，基本问题是“为什么我们会得到 _framework 和 _content 文件的“404”？

Answer 1

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

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

Answer 2

之前，当我将 WASM 应用程序 .NET 5 移植到 .NET 6 时，就经历过这种情况。确保您将您的Microsoft.AspNetCore.Components.WebAssembly包和所有其他相关包更新到最新版本。