如何在 Blazor 静态 Web 应用程序中启用 CORS？答案

【问题标题】：How to enable CORS in Blazor Static Web App?如何在 Blazor 静态 Web 应用程序中启用 CORS？
【发布时间】：2023-01-13 13:47:40
【问题描述】：

我已经尝试了所有其他方法来在我的 Blazor 静态 Web 应用程序中设置 Access-Control-Allow-Origin : *。

我首先按照此文档Configure Azure Static Web Apps 设置globalHeaders。它不工作。

我尝试在构建器服务中添加 Cors。它也不起作用。

        builder.Services.AddScoped (sp => new HttpClient 
        { BaseAddress = new Uri(builder.Configuration["API_Prefix"] ??
        builder.HostEnvironment.BaseAddress) });

        builder.Services.AddCors(options => 
        { options.AddPolicy(name: policyName,
                  builder =>
                  { builder.WithOrigins("https://localhost:5000") // specifying the allowed origin
                        .WithMethods("GET") // defining the allowed HTTP method
                        .AllowAnyHeader(); // allowing any header to be sent
                  });
        }); 
        await builder.Build().RunAsync();

我也在下面的个人HttpClient请求中尝试过。

        // create request object
        var request = new HttpRequestMessage(HttpMethod.Get, uri);

        // add custom http header
        request.Headers.Add("Access-Control-Allow-Origin", "*");
        request.Headers.Add("Access-Control-Allow-Methods", "GET");

        // send request
        var httpResponse = await Http.SendAsync(request);

我使用本教程创建了 [Blazor Static Web App]。2

这是我在浏览器控制台中得到的错误。 ].3

我缺少什么来设置正确的配置？

【问题讨论】：

尽管我可以在普通浏览器的请求中获得 JSON 响应，但我无法在我的应用程序中执行此操作。这是获取 JSON 的链接dev.to/api/articles?username=zawhtut。

标签： c# cors blazor dotnet-httpclient azure-static-web-app

【解决方案1】：

通过 CORS 浏览器限制来限制服务的域消费。但是当你点击服务时，服务将被执行，但响应不会在浏览器端捕获。通过在中添加以下代码API程序.cs将允许特定域

    builder.Services.AddCors(options =>
    {
    options.AddDefaultPolicy(policy =>
    {
        policy.WithOrigins("http://192.168.10.127",
                            "https://localhost:5000",
                            "https://localhost:5001")
                            .AllowAnyHeader()
                            .AllowAnyMethod();
    });
});

app.UseCors();

要允许来自任何域，请遵循以下代码

app.UseCors(options => options.SetIsOriginAllowed(x => _ = true).AllowAnyMethod().AllowAnyHeader().AllowCredentials());

【讨论】：