httpclient - 如何解决 WebAssembly 应用程序中与 HttpClient 相关的错误

Question

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

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

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

错误消息

mono_wasm_start_single_stepping 2crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]Unhandled exception rendering component: TypeError: Failed to fetchSystem.Net.Http.HttpRequestException: TypeError: Failed to fetchat System.Net.Http.BrowserHttpHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)at System.Net.Http.HttpClient.SendAsyncCore(HttpRequestMessage request, HttpCompletionOption completionOption, Boolean async, Boolean emitTelemetryStartStop, CancellationToken cancellationToken)at WebAssemblyUseWebApi.Pages.Weather.OnInitializedAsync() in C:\projects\my_tryout\WebAssemblyUseWebApi\WebAssemblyUseWebApi\Pages\Weather.razor:line 27at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task 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;
        }
    }
}

Answer 1

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

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

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