尝试获取资源时出现 Blazor WASM NetworkError。 “CORS 缺少允许来源”

Question

在此 Blazor WASM 应用程序中，我只是尝试使用第三方 API - 我打开开发人员工具并在尝试检索数据时看到此消息“CORS Missing Allow Origin”。在这种情况下，我确实在请求中添加了request.Headers.Add("Access-Control-Allow-Origin", "*");，但它仍然失败。我已经在FF以外的其他浏览器中验证了这个结果。

Index.Razor 页面的代码在这里：

@page "/"
@inject HttpClient Http
<h3>Presentations Scheduled</h3>

<form>
    <fieldset class="form-group">
        <div>
            <button type="button" class="btn btn-dark mr-sm-2 mb-2"
                    @onclick=@(async ()=>  await GetToday())>
                Today
            </button>
        </div>
    </fieldset>

    @if (string.IsNullOrWhiteSpace(errorString) == true)
    {
        <div class="h2">No Data</div>
    }
    else if (string.IsNullOrWhiteSpace(errorString) == false)
    {
        <div class="h2">@errorString</div>
    }
</form>

<div class="h2">@TestReturn</div>




@code
{
    TestModel TestReturn;
    string errorString = null;
    string TestBaseURL;
    HttpRequestMessage request;

    private async Task GetToday()
    {
        var byteArray = Encoding.ASCII.GetBytes("user:pass");
        Http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));

        string todayDate = DateTime.Today.AddDays(0).ToString("yyyyMMdd");
        TestBaseURL = "https://webservices.xcompany.com/";
        UriBuilder TestURI = new UriBuilder(TestBaseURL);
        TestURI.Scheme = "https";
        TestURI.Path = "ws/run/reservations.json";
        TestURI.Query = "resource_query_id=246492";
        var TestQuery = HttpUtility.ParseQueryString(TestURI.Query);
        TestQuery["scope"] = "extended";
        TestQuery["start_dt"] = todayDate;
        TestQuery["end_dt"] = todayDate;
        TestURI.Query = TestQuery.ToString();
        TestBaseURL = TestURI.ToString();
        request = new HttpRequestMessage(HttpMethod.Get, TestBaseURL);
        request.Headers.Add("Access-Control-Allow-Origin", "*");

        try
        {
            using var httpResponse = await Http.SendAsync(request);
            TestReturn = await httpResponse.Content.ReadFromJsonAsync<TestModel>();
        }
        catch (Exception ex)
        {
            errorString = $"There was a problem: {ex.Message}";
        }

    }

}

Answer 1

在这种情况下，我确实添加了 request.Headers.Add("Access-Control-Allow-Origin", "*");

您没有添加这样的标题。在这方面你实际上什么也没做。必须添加此标头的是第三方的服务器，而不是您。

CORS 是一种安全功能，定义如下：

跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它允许服务器指示（通过使用诸如 "Access-Control-Allow-Origin", "*" 之类的标头）任何其他来源（域、方案或端口）而不是它自己的来源浏览器应该允许加载哪些资源。

是您的浏览器不允许加载资源。据我记得，浏览器收到带有数据的响应，但没有加载它，它告诉您它没有在响应中找到标头"Access-Control-Allow-Origin", "*"，因此它拒绝加载资源。

解决方案： 要求第三方 API 中的人员将您添加到他们的白名单网站，这些网站可以从他们的网站访问资源。我想这对你来说是不切实际的。

由于 CORS 是一项 JavaScript 安全功能，并且仅在您进行 Fetch API 调用时适用，您可以通过调用您自己的 Web API 来规避此限制，该 API 应该调用第三方 API，获取数据并将其传递回您的 WebAssembly Blazor 应用程序。