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

Question

我正试图在一个小型的WebAssetly应用程序(使用.NET 5创建(中测试HttpClient。程序.cs包含以下语句以添加HttpClient服务：

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

我的测试Razor组件的源代码发布在最后。执行语句时出现以下异常：；HttpResponseMessage response=等待http。GetAsync(apiUrl("；。使用http时也发生了同样的错误。GetFromJsonAsync<gt；。我能够通过Web API在Blazor服务器应用程序中从同一网站获取数据。由于某种原因，我无法使它在WebAssembly应用程序中工作。任何帮助都将不胜感激。

错误消息

mono_wasm_start_single_stading 2crit:Microsoft.AspNetCore.Components.WebAssembly.Frendering.WebAssemblyRenderer[100]未处理的异常呈现组件：TypeError:未能获取System.Net.Http.HttpRequestException：类型错误：未能获取在System.Net.Http.BrowserHttpHandler.SendAsync(HttpRequestMessage请求，CancellationToken取消令牌(在System.Net.Http.HttpClient.SendAsyncCore(HttpRequestMessage请求，HttpCompletionOption completionOption，布尔异步，布尔emitTelemetryStartStop，CancellationToken取消令牌(位于C:\projects\my_tryout\WebAssemblyUseWebApi\WebAssemblyUseWebApi\Pages\Weather.OnInitializedAsync((中的位于Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync((位于Microsoft.AspNetCore.Components.RenderTree.RRenderer.GetErrorHandledTask(任务任务句柄(================================================

源代码

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标头(访问控制允许原点=…(。

您可以使用Blazor服务器端，也可以将API服务器添加到WebAssembly项目中。在你尝试重新发明轮子之前，一定要看看Wasm Hosted模板。

Answer 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");
-----------------------------------------------------------------------