Blazor HttpClient卡在GetAsync中

Question

我正在针对Blazor 3.0.0-preview4-19216-03的Client Blazor应用中进行测试

剃须刀页面：

@page "/counter"
@using BlazorServiceTest
@inject IWebCrawlServiceAsync WebCrawler

<h1>Counter</h1>

<p>Current count: @debug</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    string debug = "";

    async void IncrementCount()
    {
        debug = await WebCrawler.GetWeb();
    }
}

依赖注入：

using BlazorServiceTest;
using Microsoft.AspNetCore.Components.Builder;
using Microsoft.Extensions.DependencyInjection;

namespace BlazorServicesTest
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {   
            services.AddSingleton<IWebCrawlServiceAsync, WebCrawlServiceAsync>();            
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }
}

服务：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;

namespace BlazorServiceTest
{
    public interface IWebCrawlServiceAsync
    {
        Task<string> GetWeb();
    }

    public class WebCrawlServiceAsync : IWebCrawlServiceAsync
    {
        private HttpClient _client;    

        public WebCrawlServiceAsync(HttpClient client)
        {
            _client = client;
        }

        public async Task<string> GetWeb()
        {
            var response = await _client.GetAsync("https://postman-echo.com/response-headers?foo1=bar1&foo2=bar2");
            var result = await response.Content.ReadAsStringAsync();
            return result;
        }
    }
}

每当我单击“增量”时，都不会发生任何事情，并且对GetWeb的服务调用仍停留在GetAsync调用中。

更新

如果我在Chrome的WASM调试器中调试WebCrawler服务，则会发出他的请求

但是响应部分为空：

Answer 1

我怀疑这与async void有关。

您需要让处理程序返回Task，而不是void

例如

@page "/counter"
@using BlazorServiceTest
@inject IWebCrawlServiceAsync WebCrawler

<h1>Counter</h1>

<p>Current count: @debug</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    string debug { get; set; } = "";

    async Task IncrementCount() { //<-- Note Change here
        debug = await WebCrawler.GetWeb();
    }
}

框架中提供了对异步事件处理程序的支持

引用GitHub Issue: Calling an async function via onclick

Answer 2

这可能是由于您无法控制的服务器上的CORS配置问题。我相信这个问题与Blazor无关。为了验证这一点，请在您的应用程序中定义一个本地json文件，并使用您在应用程序中使用的相同代码访问它。

希望这行得通...

更新

我不能完全确定由于CORS配置问题而导致请求失败，至少不是排他性的。在我看来，它也与SSL / TLS有关。 此错误消息是由Fiddler发出的：

  

fiddler.network.https> HTTPS握手失败。   System.IO.IOException无法从传输读取数据   连接：远程强行关闭了现有连接   主办。 <现有连接被远程主机强行关闭

基础连接已关闭，无法为SSL / TLS安全通道建立信任关系。

我想我会将这个问题发布在github中，以更好地了解这里出了什么问题。

Answer 3

在客户端应用程序中，您只能访问自己的来源或支持CORS的网站。

为了验证这是您的问题，可以尝试使用{{1}}，这可能会起作用。

但是它仅适用于该站点。通常，您无法控制响应头。这不是解决方法。

因此，对于网络爬虫而言，Blazor客户端不是一个好的平台。 JS或WASM上的任何应用程序也是如此。

Blazor服务器端应该没有问题。或使用Web API服务。