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

Posted 2023-02-27

【中文标题】尝试获取资源时出现 Blazor WASM NetworkError。 “CORS 缺少允许来源”

【英文标题】：Blazor WASM NetworkError when attempting to fetch resource. "CORS Missing Allow Origin"

【发布时间】：2021-03-31 18:08:13

【问题描述】：

在此 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";
        

    

【问题讨论】：

真正的问题是服务器对ws/run/reservations.json 路由的OPTIONS 请求响应为403。 CORS 消息只是该问题的副作用。

“CORS 消息只是那个问题的副作用”你是什么意思？ “用于 OPTIONS 请求的 403”是“预检”过程的一部分，所有这些都描述了浏览器和服务器之间的通信，并且是 CORS 的一部分。 CORS 消息绝对不是问题的副作用，而是问题本身。

【参考方案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 应用程序。

【讨论】：

我已经联系了第三方，他们的回复是“超出他们的范围”。我应该补充一点，我正在通过从打开 FF 的 IDE 运行 Visual Studio 代码来测试它。我还没有将此 Web 应用程序部署到服务器。我的研究表明这可能是问题的一部分，因为它是从 localhost 运行的？