Angular сервис не может использовать внешний API

Question

Я пытаюсь использовать внешний API (http://developer.perfectgym.com/api/memberships/memberships/) из приложения Angular 9.

Я создал класс обслуживания (perfectgym.service.ts) следующим образом ( упрощенно):

const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': 'Bearer BlAhbLaHblAH'
  })
};

@Injectable({
  providedIn: 'root'
})
export class PerfectgymService {
  private PERFECTGYM_API = "https://demo.perfectgym.pl/Api";

  constructor(private httpClient: HttpClient) { }

  getAvailableMemberships() {
     return this.httpClient.get(this.PERFECTGYM_API+'/Memberships/Memberships?timestamp=0', httpOptions);
  }
}

Затем я использую его в своем компоненте (membership.component.ts) следующим образом:

export class MembershipComponent implements OnInit {
  memberships: any = [];

  constructor(private api: PerfectgymService) { }

  ngOnInit(): void {
    this.api.getAvailableMemberships().subscribe(data => {
      for (const d of (data as any)) {
        this.memberships.push({
          id: d.id,
          timestamp: d.timestamp,
          name: d.name,
          isActive: d.isActive,
          isDeleted: d.isDeleted
        });
      }
      console.log(this.memberships);
    });
  }
}

При доступе к странице и проверке ее результатов на консоли Edge DevTools Я вижу ошибку «HTTP405: ПЛОХОЙ МЕТОД ...» и на вкладке сети Edge сообщает, что использовались опции МЕТОДА (отсюда и ошибка, поскольку служба ожидает GET).

Поскольку вызов довольно просто (httpClient.get) Я решил отладить его, используя Chrome. Chrome, вместо Edge, показать, что запрос был выполнен с использованием GET, но вместо ошибки 405 я вижу в консоли ошибку CORS:

Но вызов API через консоль (curl / Invoke-RestMethod) или SoapUI работает. Итак, API, кажется, работает и открыт для внешних вызовов.

Поскольку я новичок в Angular, я не знаю, как решить эту проблему, и любые советы приветствуются.

Answer 1

CORS (Cross-Origin Resource Sharing) - это система, состоящая из передачи HTTP-заголовков, которая определяет, блокируют ли браузеры код JavaScript внешнего интерфейса от доступа к ответам на запросы между источниками. (https://developer.mozilla.org/en-US/docs/Glossary/CORS)

Сервер angular, который по умолчанию работает на localhost:4200, поэтому, если вы используете внутренний сервер, работающий в другом домене, у вас могут возникнуть проблемы с CORS, если ваш сервер не настроен должным образом.

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

Шаг 1: Создайте файл конфигурации прокси src/proxy.conf.json и добавьте

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

Шаг 2: Добавьте ключ proxyConfig к angular.json под serve->options

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

Затем запустите приложение Angular.

Ссылка: https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/