405 (метод не разрешен) и заблокирован политикой CORS - PullRequest
Новая
       3

405 (метод не разрешен) и заблокирован политикой CORS

0 голосов
/ 28 января 2020

У меня есть Asp. Net Core (3) проект WebApi с пользовательским интерфейсом на основе Angular (7.2.1) на стороне клиента. Используя Postman или просто используя URL, я могу использовать GET и POST без каких-либо особых ошибок. При попытке сделать то же самое с помощью Angular (Chrome \ FireFox \ IE Browser) я получаю следующие ошибки.

zone.js:3243 OPTIONS http://localhost:8888/api/PaymentDetails 405 (Method Not Allowed) ccess to XMLHttpRequest at 'http://localhost:8888/api/PaymentDetails' from origin 'http://localhost:4200' 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.

Я попытаюсь поделиться столько, сколько кода я могу продемонстрировать поток.

WebApi Startup.cs:

publi c 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(options =>
    {
        options.AddPolicy("CorsPolicy",
            builder =>
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader()

                );
    });
    services.AddControllers()
        .AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
            options.JsonSerializerOptions.PropertyNamingPolicy = null;
        });

    services.AddDbContext<PaymentDetailContext>(options => options.UseSqlServer("Server=DESKTOP-KT0N2RN\\SQLEXPRESS;DataBase=PaymentDetailDB;Trusted_Connection=True;MultipleActiveResultSets=True;"));

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{


    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    app.UseCors("CorsPolicy");
}

Метод GET WebAPi: 

[HttpGet]
public async Task<ActionResult<IEnumerable<PaymentDetail>>> GetPaymentDetails()
{
    return await _context.PaymentDetails.ToListAsync();
}

Клиентская сторона: 

rootUrl: string = "http://localhost:8888/api";

getPaymentDetail()
{

    console.log(`${this.rootUrl}/PaymentDetails`)
    const headers = new HttpHeaders().set('Content-Type','application/json');
    // headers.append('Access-Control-Allow-Origin', '*');
    // headers.append('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept');
    return this._http.get(`${this.rootUrl}/PaymentDetails`,{headers:headers});
}

1 Ответ

0 голосов
/ 28 января 2020

Я думаю, что изменение следующего в Startup Configure должно работать. Обратите внимание на порядок: в соответствии с документами

При маршрутизации на конечную точку промежуточное программное обеспечение CORS должно быть настроено на выполнение между вызовами UseRouting и UseEndpoints. Неправильная конфигурация приведет к тому, что промежуточное программное обеспечение перестанет работать правильно. 

app.UseRouting();

app.UseAuthorization();

app.UseCors("CorsPolicy");

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

Я думаю, что очень краткое резюме COR может помочь объяснить, почему запросы почтальона работали для вас.

CORS по умолчанию используется в браузерах для проверки того, от каких серверов-отправителей будут приниматься запросы.

, если ваш запрос к серверу был из того же источника (все части источника должны совпадать), ваш запрос CORS не будет выполнен из-за его не перекрестное происхождение. В вашем случае порты не совпадают, поэтому, несмотря на то, что сервер и веб-приложение запущены с вашего локального хоста, он считается перекрестным источником, поскольку порты не совпадают

Когда вы отправляете запрос, браузер сначала отправьте запрос параметров (предварительный запрос), в котором отобразятся поддерживаемые поддерживаемые методы, и проверьте, имеет ли ваш источник (ваше веб-приложение переднего плана) разрешение на отправку запросов на сервер. Эта функциональность встроена в большинство основных браузеров по умолчанию (Chrome, Firefox, Edge et c).

Ваш запрос почтальона работает, потому что почтальон не отправляет предварительный запрос.

Дальнейшее чтение:

Включение CORS

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1

Что такое CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

...