c# - 为 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 并得到了同样的错误)。

我们还注释掉了服务器启动类中的一行:

// 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();

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

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

此外，如果我们在 Chrome 中查看网络选项卡，我们会看到下载的 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>