【问题标题】：How to Resove Error Related to HttpClient in WebAssembly App如何解决 WebAssembly 应用程序中与 HttpClient 相关的错误
【发布时间】：2021-08-02 22:11:04
【问题描述】：

我正在尝试在一个小型 WebAssemply 应用程序（使用 .NET 5 创建）中测试 HttpClient。 program.cs 包含以下语句来添加 HttpClient 服务：

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

我的测试 Razor 组件的源代码贴在最后。执行语句时发生以下异常：“HttpResponseMessage response = await http.GetAsync(apiUrl)”。使用 http.GetFromJsonAsync 时出现同样的错误。我能够使用 Web API 从 Blazor Server 应用程序中的同一网站获取数据。出于某种原因，我无法让它在 WebAssembly 应用程序中工作。任何帮助将不胜感激。

错误信息

mono_wasm_start_single_stepping 2 暴击：Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：TypeError: Failed to fetch System.Net.Http.HttpRequestException：TypeError：无法获取在 System.Net.Http.BrowserHttpHandler.SendAsync（HttpRequestMessage 请求，CancellationToken cancelToken）在 System.Net.Http.HttpClient.SendAsyncCore（HttpRequestMessage 请求，HttpCompletionOption 完成选项，布尔异步，布尔 emitTelemetryStartStop，CancellationToken 取消令牌）在 C:\projects\my_tryout\WebAssemblyUseWebApi\WebAssemblyUseWebApi\Pages\Weather.razor 中的 WebAssemblyUseWebApi.Pages.Weather.OnInitializedAsync()：第 27 行在 Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync() 在 Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask（任务 taskToHandle） ==================================================== =============================

源代码

page "/weather" 
@inject HttpClient http

<h3>Weather Data</h3>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <p>@errorMessage</p>
}
else if (string.IsNullOrEmpty(data))
{
    <p>Loading ...</p>
}
else
{
    <p>@data</p>
}

@code {
    string errorMessage = string.Empty;
    public string data;

    protected override async Task OnInitializedAsync()
    {
        string apiUrl = "https://www.metaweather.com/api/location/2471217/";
        HttpResponseMessage response = await http.GetAsync(apiUrl);

        if (response.IsSuccessStatusCode)
        {
            data = response.Content.ReadAsStringAsync().Result;
        }
        else
        {
            errorMessage = response.ReasonPhrase;
        }
    }
}

【问题讨论】：

发布 full 异常文本，而不仅仅是堆栈跟踪的一部分。不过，.Result 是一个错误。 OnInitializedAsync 是异步方法，ReadAsStringAsync 也是。使用await response.Content.ReadAsStringAsync();

标签： httpclient blazor blazor-webassembly

【解决方案1】：

该站点似乎不允许来自浏览器的请求。

响应中没有 CORS 标头 (access-control-allow-origin=...)。

您可以使用 Blazor 服务器端或将 API 服务器添加到您的 WebAssembly 项目。在尝试重新发明轮子之前，请查看 Wasm 托管模板。

【讨论】：

【解决方案2】：

当我在服务器端使用 startup.cs 程序中的以下配置设置创建 ASPCoreWebAPI 应用程序时，问题已解决。这些设置允许 WebAssembly 应用使用 HTTPClient 检索数据。

1. In ConfigureServices, Add following
-------------------------------------------------------------------------
services.AddCors(options =>
{
    options.AddPolicy(
        "Open",
        builder => builder.AllowAnyOrigin().AllowAnyHeader());
});
------------------------------------------------------------------------
2. In Configurations, add following
------------------------------------------------------------------------
app.UseCors("Open");
-----------------------------------------------------------------------

【讨论】：