Angular / API消耗-請求標頭-CORS代理

Question

我被卡住了..請幫助。

我正在嘗試從API提取數據（該API已經設置）。

使用Postman時，我可以成功獲取數據。 我只是將x-api-key添加為標題。

我將需要發送GET請求，每個請求必須在http請求標頭中包含一個私有API密鑰，如以下示例所示：x-api-key：TcKkYuizu67bsamplexeF4AGTnGWgY7E8MCiTEST

但是我似乎無法使用Angular在標頭中成功添加x-api-key。 我以為那是因為CORS的預檢，但是我幾乎可以肯定這不是原因。

我添加了CORS轉換器和Postman Interceptor擴展。

使用Postman Interceptor擴展程序，我注意到有些不對勁。 x-api-key根本沒有分類為標頭，並且找不到密鑰本身：

以下是Chrome控制台中的錯誤：

這是我的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));
  }
}

Angular CLI：7.1.1節點：11.3.0

Answer 1

Content-Type標頭指定要發送到服務器的請求對象的媒體類型。 因為您只是從服務器獲取JSON數據，所以應將Accept標頭設置為所需的響應類型，即Accept: application/json 。

Answer 2

x-api-key不是CORS安全列出的請求標頭 。 它將觸發一個OPTIONS請求，該請求必須具有成功的響應，否則XHR將被瀏覽器阻止。

chrome插件無法根據當前的chrome擴展API修改響應HTTP狀態代碼。 解決方案是使用可正確響應OPTIONS請求的CORS代理 。 有關更多信息，請參閱在Chrome中禁用同一來源策略 。