為 blazor.webassembly.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 並得到了同樣的錯誤）。

我們還注釋掉了服務器啟動 class 中的一行：

// 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 和框架 {在客戶端上，我們嘗試了兩個 Sdks，結果相同）。 客戶：

<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>

服務器的 Startup Class 按以下順序配置：

    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 class 按以下順序配置：

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”文件不存在？？？！？

當我們啟動調試 session 時，VS 中會出現一個“腳本文檔”圖標，其中有一個“localhost:50413/js/sessionStorage.js”圖標，因此，運行時似乎找到了 wwwroot，但是沒有“_framework”或“_content”文件夾，因此無法加載我的 blazor WASM 文件。 當我們終止調試 session 時，此圖標消失。

此外，如果我們在 Chrome 中查看 .network 選項卡，我們會看到下載的 wwwroot 文件的內容帶有“200”，但 blazor.webassembly.js（應該在 _framework 中）得到 404。

感謝這里的任何指導，基本問題是“為什么我們得到 _framework 和 _content 文件的“404”？

Answer 1

確保您的服務器包含對您的客戶端的項目引用。 還要確保您的客戶的 csproj 文件使用

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

Answer 2

這對我有用

打開 Uptades 選項卡並更新 2 個包：Microsoft.AspNetCore.Components.WebAssembly、Microsoft.AspNetCore.Components.WebAssembly.DevServer。

如果未安裝此軟件包，請安裝它們。

https://blazorschool.com/tutorial/blazor-wasm/do.net5/update-from-do.net-5-to-do.net-6-682674

Answer 3

在我將我的 WASM 應用程序 .NET 5 移植到 .NET 6 之前，我曾經歷過這種情況。確保將Microsoft.AspNetCore.Components.WebAssembly和所有其他相關軟件包更新到最新版本。