4

我正在针对 Blazor 3.0.0-preview4-19216-03 的客户端 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，他的请求正在发出

在此处输入图像描述

但是响应部分是空的：

在此处输入图像描述

4

3 回答 3

1

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

希望这有效...

更新

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

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

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

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

于 2019-05-02T16:12:31.237 回答
1

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

为了验证这是您的问题，您可以尝试 https://postman-echo.com/response-headers?foo1=bar1&access-control-allow-origin=*，这可能有效。

但它只适用于该网站。您通常无法控制响应标头。这不是一个修复。

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

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

你可以在 Wasm 应用程序中尝试：

@page "/"
@inject HttpClient Http

<h1>Hello, world!</h1>
<div>
    <button class="btn btn-primary" @onclick="GetData1">With CORS</button>
    <button class="btn btn-primary" @onclick="GetData2">No CORS</button>
</div>
<div>@json</div>

@code
{
    string json = ".";

    async Task GetData1()
    {        
        json = await Http.GetStringAsync(
         "https://postman-echo.com/response-headers" + 
         "?foo1=bar1&access-control-allow-origin=*");
    }

    async Task GetData2()
    {
        json = "Getting w/o CORS... ";
        json = await Http.GetStringAsync(
          "https://postman-echo.com/response-headers?foo1=bar1");
    }
}
于 2019-05-02T20:33:24.833 回答
1

我怀疑它与async void.

您需要让处理程序返回 a 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 问题：通过 onclick 调用异步函数

于 2019-05-02T14:11:00.550 回答