在 Angular 中沒有得到響應 Header

Question

我正在學習 Angular 並且正在開發一個我一直想做的網站，與Internet Radio非常相似。

我主要是 .NET 開發人員，所以所有這些東西對我來說仍然有點陌生，但我正在學習。 目前我正在制作一個系統，這樣我就可以從這些網絡收音機中檢索元數據——例如，當前歌曲的標題。

由於這些電台中的大多數都是通過 Icecast/Shoutcast 廣播的，因此我需要發送一個 GET 請求，其中包括值為1的 header "Icy-MetaData" 。

這應該返回一個帶有 header 的響應，該 header 包含icy-metaint和一個包含每個音頻塊大小的數據的值，在此塊之后它將返回一個包含元數據字符串大小的字節。 那么這個過程需要重復，至少我是這么理解的。

我一直遇到 CORS 的問題，但我想我已經通過啟動我的瀏覽器並關閉了安全功能繞過了它，如此處所建議的。

這是我目前擁有的精簡版；

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

@Component({
  selector: 'app-radio-player',
  templateUrl: './radio-player.component.html',
  styleUrls: ['./radio-player.component.scss']
})

export class RadioPlayerComponent implements OnInit {
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    var headers = new HttpHeaders({
      'Access-Control-Allow-Headers':'Request-Header, Response-Header',
      'Access-Control-Allow-Methods':'POST, GET',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Expose-Headers':'Response-Header',
      'Icy-MetaData': '1'
    });
    this.http.get("http://stream.antenne.de/antenne", {headers, observe: 'response'}).subscribe(resp => {
      console.log(resp.headers.get("icy-metaint"));
    });
  }
}

我已經通過 Postman 嘗試了這個並且它按預期工作，但是當我通過服務在本地嘗試這個時 - 控制台是空的。

我很確定我做錯了什么，或者 CORS 阻止我測試這個。 我理解為什么 CORS 存在，但我對如何正確測試東西有點不知所措，因為沒有 CORS 妨礙。

因此，任何建議將不勝感激。

Answer 1

Basicly when developing angular or with any client side framework/lib it will run/compile on its own server for example angular will compile in node.js instance under http://4200 it means that when an http request is being sent to any webapi that runs under different server (like iis in .net,or node.js) the webapi server will through CORS, to avoid CORS you should enable cors in server side specificly for localhost,for example in.Net framework in wiil be like this

Global.asax=>Application_BeginRequest()=> Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 以及您想要傳遞到服務器和從服務器的任何其他 header，這是出於安全原因，在 Z2D50972FECD376129545507F1062089Z 核心中有中間件以及配置服務中的配置可以完成工作，盡量讓 Z099FB395346F31EDB 成為您想要的在服務器端的請求和響應中