Cors блокирует запросы от моего одностраничного приложения

Question

Проблема : 'http://localhost: 44383 // api / employee ' from origin 'https://localhost: 44372 ' заблокирована политикой CORS : На запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Пробное решение в серверном приложении:

в Startup.cs the ConfigureServices метод выглядит следующим образом:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();

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

    });
    services.AddCors();

    // In production, the React files will be served from this directory
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/build";
    });

    services.AddAutoMapper(typeof(Startup));

    services.AddSwaggerGen(options =>
    {
        options.SwaggerDoc("v1", new OpenApiInfo
        {
            Title = "Test",
            Version = "v1",
            Description = "Test Api"
        });
    });

    services.Installer(Configuration);
    services.AddTransient<IDbClient, DbClient>();
}

in Startup.cs в Configure метод выглядит следующим образом:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }


    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseRouting();

    app.UseAuthorization();
    app.UseCors(builder => builder
    .AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader());



    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });

    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("v1/swagger.json", "Test");
    });

    app.UseGlobalExceptionHandler(x =>
    {
        x.ContentType = "application/json";
        x.ResponseBody(_ => JsonConvert.SerializeObject(new
        {
            Message = "An error occurred whilst processing your request"
        }));
    });
    app.Map("/error", x => x.Run(y => throw new Exception()));
}

Во внешнем интерфейсе мой вызов:

return axios.get(`${process.env.REACT_APP_SERVER_URL}/${endpoint}`,
            {
                headers: {
                    'Access-Control-Allow-Origin': '*',
                }
            });

К сожалению, проблема все еще происходит ..

РЕДАКТИРОВАТЬ:

Контроллер:

[ApiController]
[Route("[controller]")]
[EnableCors]
public class EmployeesController : Controller
{
    public EmployeesController(IDbClient dbClient, IMapper mapper)
    {
        ..
    }

    [EnableCors]
    [HttpGet("/api/employees")]
    public ActionResult GetEmployees()
    {

        try
        {
            ...
        }
        catch (Exception e)
        {
            ...;
        }
    }
}

РЕДАКТИРОВАТЬ:

так что после нескольких часов работы я могу немного лучше сформулировать проблему. Мой код работает нормально, когда я пытаюсь получить доступ к контроллерам из браузера или почтальона. Он блокируется из CORS, когда вместо этого из моего клиентского приложения React я звоню с топором ios на сервер. Мне вообще не нужен CORS для моего серверного приложения, и я пытаюсь разрешить все.

Полная ошибка, когда в запросе указан заголовок:

Ошибка, когда в запрос от внешнего интерфейса не добавлен пользовательский заголовок:

Access to XMLHttpRequest at 'http://localhost:50365/api/employees' from origin 'https://localhost:44311' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

это не проблема с включением CORS. Вам это не нужно в этом случае. Это потому, что у вас есть проект, созданный с помощью шаблона React, и это означает, что CORS не требуется.

Шаги для исправления:

Удалите весь связанный с CORS код из файла Startup.cs.
В методе Configure вы можете добавить app.MapControllerRoute() к

app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
        endpoints.MapControllerRoute();
    });

Изменить следующее:

return axios.get(`${process.env.REACT_APP_SERVER_URL}/${endpoint}`, {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
});

На это:

return axios.get(`${endpoint}`);

Когда вы Сделайте это, ваше приложение должно просто работать.

Answer 2

Убедитесь, что вы также аннотируете метод конечной точки с помощью атрибута [EnableCors]:

[EnableCors]
public string Employees()
{
}

Если он все еще не работает, вы также можете попробовать эту конфигурацию:

 public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();

        services.AddCors(options =>
        {
            options.AddDefaultPolicy(
                builder =>
                {
                    builder.WithOrigins("*")
                                        .AllowAnyHeader()
                                        .AllowAnyMethod();
                });

        });

    }