从 Axios 调用 .Net WebAPI 时出现 CORS 错误

Posted 2023-03-04

【中文标题】从 Axios 调用 .Net WebAPI 时出现 CORS 错误

【英文标题】：CORS Error while calling .Net WebAPI from Axios

【发布时间】：2021-06-29 15:54:21

【问题描述】：

我有一个登录表单，我在其中使用 Axios 调用 .Net API 做出反应

axios
.post(
    'https://localhost:5001/login',
    
        email: '[e-mail]',
        password: '12345',
    ,
    
        headers: 
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
        ,
    ,
)
.then(function (response) 
    console.log(response)
)
.catch(function (error) 
    console.log(error)
)

下面是 Startup.cs 在 API 端处理 CORS 的代码

public void ConfigureServices(IServiceCollection services)

    services.AddControllers();
    services.AddSwaggerGen(c =>
    
        c.SwaggerDoc("v1", new OpenApiInfo  Title = "API", Version = "v1" );
    );
    services.AddCors(option => 
    
        option.AddPolicy("CorsPolicy", policy =>
        
            policy.AllowAnyMethod().AllowAnyHeader().WithOrigins("http://localhost:3000/");
        );
    ); 


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
        app.UseSwagger();
        app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "API v1"));
    
    // app.UseHttpsRedirection();
    app.UseRouting();
    app.UseCors("CorsPolicy");
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
    
        endpoints.MapControllers();
    );

在浏览器的控制台中，我收到以下错误：

Access to XMLHttpRequest at 'https://localhost:5001/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)

POST https://localhost:5001/login net::ERR_FAILED

我已经使用 VS 代码的 REST Client 扩展测试了 API。 API 工作正常，但从浏览器调用时出现这些错误。

【参考方案1】：

尝试将 AddCors 移动到配置部分的顶部，在 AddControllers 之前。还要更改语法并从 url 中删除尾随的“/”：

services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
            
                builder.WithOrigins("http://localhost:3000")
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            ));

【讨论】：

嗨@Sergey，删除我现有代码中的尾随“/”有效。但是为什么那个“/”会导致问题呢？

如果 URL 以 / 结尾，则 ulrs 的比较总是返回 false。