Blazor WebAssembly .Net 8 WebAPI CORS 问题

Question

我有默认的 Blazor APP，并且我修改了主页以调用 API。当 API 最初运行时，API 工作正常，但是一两秒后应用程序刷新，我看到“TypeError：无法获取”。当我查看控制台时，我看到以下内容

从源“https://localhost:7280”获取“https://example.com”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：无“Access-Control-”请求的资源上存在“Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

因此，它似乎在应用程序预渲染时可以工作，但在完全加载后就无法工作。

这是我的代码

BlazorApp1\program.cs

builder.Services.AddHttpClient();
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        policy =>
        {
            policy.WithOrigins("https://example.com");
        });
});

.
.

app.UseCors();

BlazorApp1.Client\program.cs

builder.Services.AddScoped(sp => new HttpClient());

BlazorApp1.Client\Pages\Home.Razor

@page "/"
@inject HttpClient Http

response: @resptext

@code {
    public string resptext { get; set; } = "";

    protected override async Task OnInitializedAsync() {

            var request = new HttpRequestMessage(HttpMethod.Get, "https://example.com");
            request.Headers.Add("oid", "00000000-0000-0000-0000-000000000000");

            try
            {
                var response = await Http.SendAsync(request);

                resptext = await response.Content.ReadAsStringAsync();
            }
            catch (Exception ex)
            {
                resptext = ex.Message;
            }
    }
}

当应用程序运行时，如果我运行 Chrome 并禁用 CORS，它可以正常工作

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\temp\chrome"

我认为问题是我需要将 CORS 策略添加到 BlazorApp1.Client 项目，但我不确定如何执行此操作？

Answer 1

我已经成功解决了这个问题，事实上它最初一直有效，直到预渲染表明这是 Blazor 问题之后。事实上，问题出在我调用的 API 中的 CORS 上。我将其添加到 API 解决方案中

API/程序.cs

builder.Services.AddCors(options =>
    {
        options.AddDefaultPolicy(builder =>
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
    });

.
.

app.UseCors();

我已从 Blazor 应用程序中删除了 CORS，一切正常！