Потребление углов / API - заголовок запроса - CORS-прокси

Question

Я застрял .. Пожалуйста, помогите.

Я пытаюсь получить данные из API (API уже настроен).

Я могу успешно получить данные при использованииПочтальон.Я просто добавляю в качестве заголовка ключ x-api.

Мне нужно будет отправлять запросы GET, и каждый запрос должен содержать закрытый ключ API.в заголовке запроса http, как в следующем примере: x-api-key: TcKkYuizu67bsamplexeF4AGTnGWgY7E8MCiTEST

Но я не могу успешно добавить x-api-ключ в заголовок, используя Angular.Я думал, что это из-за предварительной проверки CORS, но я почти уверен, что это не причина.

Я добавил расширения для смены CORS и Почтальона-перехватчика.

Используя расширение Почтальона-перехватчика, язаметил, что что-то не так.X-api-ключ вообще не классифицируется как заголовок, и сам ключ не может быть найден:

Вот ошибки изХромированная консоль:

А вот мой код app.component.ts:

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

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'x-api-key': 'PE84t4CCUC5e7JaGqSeyH7WdRfU6rhoRa6*****',
    'Authorization': 'x-api-key PE84t4CCUC5e7JaGqSeyH7WdRfU6rhoRa6*****'
  })
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'API';

  constructor(private http: HttpClient) {
    console.log('test');
  }
  ngOnInit(){
    let obs = this.http.get('https://api-proxy.***/GetChannels', httpOptions);
    obs.subscribe((response) => console.log(response));
  }
}

Угловой CLI: 7.1.1Узел: 11.3.0

Answer 1

x-api-key не является заголовком запроса в соответствии с CORS-списком .Это вызовет запрос OPTIONS, который должен иметь успешный ответ, иначе XHR будет заблокирован браузером.

Нет возможности для плагина chrome изменить код состояния HTTP ответа на основе текущего API расширения chrome.Решение состоит в том, чтобы использовать CORS-прокси , который правильно отвечает на запрос OPTIONS.Для получения дополнительной информации см. Отключить ту же политику происхождения в Chrome .

Answer 2

Заголовок

Content-Type указывает тип мультимедиа объектов запроса, которые вы отправляете на сервер.Поскольку вы просто получаете данные JSON с сервера, вы должны установить заголовок Accept в соответствии с тем типом ответа, который вы хотите, то есть Accept: application/json.