对 fetch 的访问已被 CORS 策略阻止 - Blazor 客户端 Web 程序集

Question

我有一个 blazor Web 程序集，它从构建在 ASP.NET Core 上的外部 API 获取，但我无权访问该程序集。我可以执行 get 请求，但无法执行 post 请求。当我这样做时，我收到以下错误。

从源“http://localhost:56138”获取“http://external:9000/User/Create”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：无“访问” -Control-Allow-Origin'标头存在于所请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

api 的作者确认他启用了 cors 来允许启动中的任何标头，并建议我也这样做，但这并没有解决问题。我从调试器中确认我正在发送端点所需的正确数据格式，并且我也在与 Web 服务相同的 http 方案上运行。

这是program.cs中的客户端配置

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://external:9000/") });
builder.Services.AddCors(policy =>
{
   policy.AddPolicy("_myAllowSpecificOrigins", builder => builder.WithOrigins("http://external:9000/")
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials());
   });

这就是我发帖的方式

var dataJson = JsonConvert.SerializeObject(application);
var stringContent = new StringContent(dataJson, Encoding.UTF8, "application/json");
var response = await _httpClient.PostAsync($"User/Create", stringContent);

我读过这是 blazor 组装的常见问题，但我不完全确定我读到的内容。我目前正在尝试将项目移动到 blazor 服务器以查看它是否有效，但我更喜欢它在 Web 组装上。

Answer 1

builder.Services.AddCors(policy =>
{
   policy.AddPolicy("_myAllowSpecificOrigins", builder => builder.WithOrigins("http://external:9000/")
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials());
   });

此配置应该在服务器上完成，而不是您的服务器，而是外部 API 的服务器。除了调用该 Web Api 上的端点之外，您在这方面什么都不做。

api 的作者确认他们启用了 cors 来允许他的启动中的任何标头

如果是这样，请向他们索要代码以进行确认...

并建议我也这样做，但这并没有解决问题。

你什么也不做。

解决办法：

由于 CORS 是浏览器强制执行的 JavaScript 安全功能，您可以通过调用服务器代码来规避它，您可以从该代码执行对此 Web Api 端点的调用，然后将其返回到您的 WebAssembly 前端。尽可能多地使用异步代码。

根据评论更新

您是说我应该在一个解决方案下有两个项目，即服务器和客户端？服务器调用外部API，然后将其传递给客户端。这就是你最后的建议吗？

如果您使用托管的 WebAssembly Blazor 应用程序，其中托管服务器包含 Web Api 控制器，那么您应该公开可以从 WebAssembly 前端调用的端点。这些端点中的代码应该执行对外部 Web Api 的 HTTP 调用，并将从外部 Web Api 接收到的数据传递回 WebAssembly 调用方法。

注意：如果您没有此类控制器（它们是由 Visual Studio 默认创建的），您可以自己将它们添加到服务器项目中。

如果您已经创建了 Web Api 项目而不是这些控制器，则从您的 Web Api 项目公开必要的端点。请注意，只要您提供正确的 Url，您的 Web Api 项目是否驻留在 WebAssembly 前端的同一解决方案中都没有区别。

如果您单独使用 WebAssembly Blazor 应用程序；也就是说，默认安装不会创建 Server 项目，您需要创建一个 Web Api 项目并使用它，除非您已经创建了一个。