首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >NET5.0 Blazor WASM CORS客户端异常

NET5.0 Blazor WASM CORS客户端异常
EN

Stack Overflow用户
提问于 2020-11-16 20:56:18
回答 3查看 10.8K关注 0票数 8

我有一个Blazor WASM应用程序和一个Web Api,供Blzor通过HttpClient调用。这两个程序运行在同一台机器上(也在生产环境中运行,对于小型企业应用程序来说,这不应该是一种奇特的环境!)。

从Blazor客户端调用Web Api会导致客户端CORS异常

CORS策略阻止了对从源'https://localhost:5001‘获取'http://localhost:4040/’的访问:请求的资源上不存在' Access -Control-Allow- origin‘标头。如果不透明的响应满足您的需求,请将请求的模式设置为'no- CORS‘,以便在禁用CORS的情况下获取资源。

这是本例的预期行为。

在我用PHP开发的一个以前的api项目中,它具有相同的客户端行为,我可以通过简单地设置响应头来绕过CORS异常。

代码语言:javascript
复制
$response = new Response;
$response->setState(false, $route->command);
...
header("Access-Control-Allow-Origin: *");
echo $response;

现在我想在我的.net 5.0WebApi中使用它。我在互联网上找到了不同的文档来解决这个问题,比如

https://docs.microsoft.com/de-de/aspnet/core/security/cors?view=aspnetcore-5.0 https://www.c-sharpcorner.com/article/enabling-cors-in-asp-net-core-api-application/ https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.cors.infrastructure.corspolicybuilder.withorigins?view=aspnetcore-5.0

并在我的api中实现它。

代码语言:javascript
复制
    public class Startup {
        //---------------------------------------------------------------------

        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }
        //---------------------------------------------------------------------

        public IConfiguration Configuration { get; }

        //---------------------------------------------------------------------

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices
                    (
                        IServiceCollection services
                    )
                    =>  services
                        .AddCors()
                        .AddSwaggerGen(c => c.SwaggerDoc("v1", new OpenApiInfo { Title = "api", Version = "v1"}) )
                        .AddControllers()
                        ;
        //---------------------------------------------------------------------

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure
                    (
                        IApplicationBuilder app,
                        IWebHostEnvironment env
                    )
                    =>  app.
                        apply( _ =>
                        {
                            if (true) //(env.IsDevelopment())
                            {
                                app
                                .UseDeveloperExceptionPage()
                                .UseSwagger()
                                .UseSwaggerUI( c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "api v1") );
                            }
                        })
                        .UseCors( cors =>
                            cors
                            .AllowAnyHeader()
                            .AllowAnyMethod()
                            .SetIsOriginAllowed( _ => true )
                            .AllowCredentials()
                        )
                        .UseHttpsRedirection()
                        .UseRouting()
                        .UseAuthorization()
                        .UseEndpoints( e => e.MapControllers() )
                        ;
        //---------------------------------------------------------------------
    }

甚至尝试在ApiController中设置响应头

代码语言:javascript
复制
    [Route("/")]
    [ApiController]
    public sealed class ServertimeController : ControllerBase
    {
        //[EnableCors("AllowOrigin")]
        [HttpGet]
        public Servertime Get() {

            Response.Headers.Add("Access-Control-Allow-Origin", "*");
            Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT");

            return servertime();
        }
    }

Blazor WASM客户端如下所示

代码语言:javascript
复制
    private async void onClick()
    {

        var response = await httpClient.GetFromJsonAsync<Servertime> ("http://localhost:4040");
        message = response.servertime;
        this.StateHasChanged();
    }

但它仍然会导致客户端CORS异常。为了在开发中绕过这一点,我使用了浏览器扩展“CORS Unblock”,但这不是用于部署的选项。

什么是避免Blazor客户端异常的正确方法,我错过了什么?

EN

回答 3

Stack Overflow用户

发布于 2021-01-28 21:15:11

@Dmitriy Grebennikov的回答也是有效的,但它需要一点改进才能使其更安全。

Startup.csConfigureServices中,在services.AddControllers();之前添加以下代码

代码语言:javascript
复制
services.AddCors(options =>
            {
                options.AddDefaultPolicy(builder => 
                builder.WithOrigins("https://localhost:44338")
                       .AllowAnyMethod()
                       .AllowAnyHeader());
            }); 

确保您的url不应以/结尾。

您可以将许多url传递给WithOrigins方法。最后,在Startup.csConfigure方法中,在app.UseAuthorization();之前和app.UseRouting();之后添加以下行

代码语言:javascript
复制
app.UseCors();

代码现在应该可以工作了。

票数 9
EN

Stack Overflow用户

发布于 2020-11-16 21:02:20

只需将此代码添加到ConfigureServices方法:

代码语言:javascript
复制
services.AddCors(options =>
        {
            options.AddPolicy("DevCorsPolicy", builder =>
            {
                builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
            });
        });

和下面的配置方法:

代码语言:javascript
复制
app.UseCors("DevCorsPolicy");
票数 3
EN

Stack Overflow用户

发布于 2021-06-05 19:42:00

代码语言:javascript
复制
var client = new HttpClient();

var request = new HttpRequestMessage
{
    Method = new HttpMethod("GET"),
    RequestUri = new Uri($"{site.BaseUrl}robots.txt")
};

request.Headers.Add("Accept", "text/plain");
request.SetBrowserRequestMode(BrowserRequestMode.NoCors);

var response = await client.SendAsync(request);

var txt = await response.Content.ReadAsStringAsync();

参考文献

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64858434

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档