Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 从Axios调用.Net WebAPI时出现CORS错误_Reactjs_Api_.net Core_Cors - Fatal编程技术网

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

Reactjs 从Axios调用.Net WebAPI时出现CORS错误,reactjs,api,.net-core,cors,Reactjs,Api,.net Core,Cors,我使用Axiosreact调用.Net API时使用了一个登录表单 axios .post( 'https://localhost:5001/login', { email: 'abc@gmail.com', password: '12345', }, { headers: { 'Content-Type': 'application/json', 'Access-Co

我使用
Axios
react调用.Net API时使用了一个登录表单

axios
.post(
    'https://localhost:5001/login',
    {
        email: 'abc@gmail.com',
        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客户机
扩展测试了API。API工作正常,但从浏览器调用时会出现这些错误。

尝试将AddCors移动到配置部分的顶部,然后再添加控制器。还要更改语法并从url中删除尾随“/”:


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

你好@Sergey,删除我现有代码中的尾随“/”行得通。但是为什么“/”会导致这个问题呢?如果URL以/结尾,那么ulrs的比较总是返回false。