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

Posted 2023-03-27

【中文标题】如何解决 WebAssembly 应用程序中与 HttpClient 相关的错误

【英文标题】：How to Resove Error Related to HttpClient in WebAssembly App

【发布时间】：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();

【参考方案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");
-----------------------------------------------------------------------