Blazor WebAssembly，对 webService 的调用导致“跨源请求被阻止：...”

Question

你和我可以点击这个链接并获得鼓舞人心的报价。 https://zenquotes.io/api/random

从 Blazor WebAssembly 中调用相同的 url 会出现 CORS 错误。

跨域请求被阻止：同源策略不允许读取位于...的远程资源

我的测试用例是默认的Visual Studio 2022，添加新项目Blazor WebAssembly App模板。该项目带有几页和一些共享组件。我将

SurveyPrompt.razor

共享组件修改为如下所示。

为什么我可以使用链接从浏览器获取数据，但不能从应用程序内部获取数据？ 最重要的是……我该如何解决？

@inject HttpClient http

<div class="alert alert-secondary mt-4">
    <p>
        <span class="oi oi-pencil me-2" aria-hidden="true"></span>
    <strong>@Title</strong></p>
    @if (HTML is not null)
    {
        @((MarkupString)HTML)
    }
</div>

@code {
    // Demonstrates how a parent component can supply parameters
    [Parameter]
    public string? Title { get; set; }
    private string? HTML { get; set; }


    protected override async Task OnInitializedAsync()
    {
        await GetQuote();
    }

    private async Task GetQuote()
    {
        try
        {
            string url = "https://zenquotes.io/api/random";
            var response = await http.GetFromJsonAsync<QuoteResponse>(url);
            HTML = response is not null ? response[0]?.h ?? string.Empty : string.Empty;
        }
        catch (Exception e)
        {
            HTML = e.Message;
        }
    }

    class QuoteResponse
    {
        public string? q { get; set; }//quote
        public string? a { get; set; }//author
        public string? i { get; set; }//author image
        public int? c { get; set; }//char count
        public string? h { get; set; }//html
    }
}

Answer 1

为什么我可以使用链接从浏览器获取数据，但不能从应用程序内部获取数据？

因为该 API 不提供 CORS 标头。要么是故意的，要么是因为疏忽。它看起来像一个旧服务，可能是在 CORS 普及之前。

如果没有该标头，浏览器会阻止来自您应用程序的请求。

...我该如何解决？

通过使用服务器。 Blazor 服务器端或您自己的 API 服务器（如 Blazor Wasm Hosted）。
发出请求的代码应该在浏览器之外运行。

或者游说该站点的所有者以允许 CORS 请求。