При получении доступа к WebApi не допускается HTTP-метод Angular 5

Question

У меня есть эта услуга:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {

  constructor(private http: HttpClient) {}

  getUsers() {
    const options = {
        headers: new HttpHeaders({
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET',
          'Access-Control-Allow-Headers': 'Origin, Content-Type',
          'Content-Type': 'text/xml'
        })
      };

    return this.http.get('myurl', options);
  }
}

И я пытаюсь получить доступ к API, который имеет только GET. Этот конкретный ресурс разрешает анонимный доступ.

Однако я получаю следующие ошибки (в консоли Chrome):

ОПЦИИ myurl 405 (Метод не разрешен)

Не удалось загрузить myurl: Ответ на предварительный запрос не проходит проверку контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Источник 'http://localhost:4200', следовательно, не имеет доступа. Ответ имеет HTTP-код состояния 405.

Есть идеи, как исправить эти ошибки?

Answer 1

Предполагая, что вы дотнет ядро.

Взято из MSFT Документов : вам нужно разрешить CORS в Startup.cs, например:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole();

    // Shows UseCors with CorsPolicyBuilder.
    app.UseCors(builder =>
       builder.WithOrigins("http://localhost:4200"));

ОБНОВЛЕНИЕ при использовании .ASPNet WebApi2

Взято из MSFT Docs : существует много способов реализации политики CORS. Один пример: в файле WebApiConfig.cs

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // New code
        config.EnableCors();

        // existing code
    }
}

и затем в вашем контроллере:

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
public class TestController : ApiController
{
    // Controller methods not shown...
}

Answer 2

Даже если ваш веб-интерфейс настроен на включение заголовков контроля доступа, бэкэнд, к которому вы пытаетесь получить доступ, не настроен для принятия вашего источника. Если у вас есть контроль над бэкендом, к которому вы пытаетесь получить доступ, т.е. если вы можете изменить код, вам нужно обновить его, чтобы разрешить все OPTIONS запросы, или, в качестве альтернативы, настроить его для разрешения вашего localhost:4200 источника.

Если у вас нет доступа к внесению изменений в бэкэнд, вы можете подать заявку через прокси . Достаточно добавить proxy.conf.json со следующим содержимым:

{
    "/": {
        "target": "myurl",
        "secure": false
    }
}

, где myurl - это URL-адрес внутреннего интерфейса API. Затем при запуске приложения укажите местоположение конфигурации прокси:

ng serve --proxy-config proxy.conf.json

Answer 3

Ошибка говорит о том, что запрошенный ресурс не позволяет вам пройти. Попробуйте добавить заголовки к серверной части, к которой вы хотите получить доступ, чтобы разрешить localhost: 4200, поскольку он не пропустит