Not Getting Response Header in Angular

Question

I'm in the process of learning Angular and am working on a website I've always wanted to make, something very similar to that of Internet Radio.

I'm mainly a .NET developer so all this stuff is still a bit alien to me, but I'm learning. Currently I'm in the process of making a system so I can retrieve the metadata from such internet radios - for example, the title of the current song.

Since most of these stations are broadcast via Icecast/Shoutcast, I need to send a GET request which includes the header "Icy-MetaData" with a value of 1.

This should return a response with a header containing icy-metaint and a value containing data how large each chunk of audio is, after this chunk it will return a byte containing the size of the metadata string. Then this process needs to repeat, at least that's my understanding of it.

I've been running into issues with CORS but I think I've bypassed it via launching my browser with security features turned off, as suggested here.

Here's a stripped down version of that I currently have;

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"));
    });
  }
}

I've tried this via Postman and it works as expected, however when I try this locally via serve - the console is empty.

I'm fairly sure I'm either doing something wrong, or CORS preventing me from testing this. I understand why CORS exists, but I am a bit at a loss as to how to properly test stuff as this without CORS getting in the way.

So any suggestions would be much appreciated.

Edit:

On second thought, I don't think what I'm trying to do is possible with just Angular. The stuff I'm trying to get is a continuous connection, which is probably why I don't get any console output, because it technically never finishes.

I was able to connect to the adress, get the response headers and read the data via C#.

So I would need some kind of backend service which retrieves this data and sends it to Angular.

This got a lot more complicated than I thought it would be so I'll probably just put this on the backburner for now.

check this https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers — Danail Videv, Dec 30 '21 at 15:56
@danvid Thanks, I've edited my OP and tried adding some more request headers. But the results are the same, console remains empty. I can see in the DevTools that I do have a connection established, but it seems nothing is pushed through to my subscription? — Dealman, Dec 30 '21 at 17:32
'Access-Control-Allow-Origin': '*', and 'Access-Control-Expose-Headers':'Response-Header' these are response headers , you should add this to the web server , not angular application — Danail Videv, Dec 30 '21 at 21:27
Ah, that makes sense. I can't do that on the URL I am testing on, though since I am not the owner of that server. It does work when I do it through Postman, though. — Dealman, Dec 30 '21 at 23:05

score 0 · Answer 1 · answered Dec 30 '21 at 16:37

0

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"); as well as any other header you want to pass to server and from server,this is done for security reasons, in .net core there is middleware as well as configuration in the ConfigureServices that does the work ,try to allow the header you want to be in request and response in the server side

answered Dec 30 '21 at 16:37

Omer David

31
1
3

Thanks for the reply! I've looked into this a bit further and expanded my headers in the OP. However, the console is still empty. Did I miss something or did I misunderstand how this works? I tried directly allowing my localhost:4200 instead of using wildcard as well. – Dealman Dec 30 '21 at 17:35
The reason that using postman will get the header is that CORS is a modern browser concept which mean that when an ajax request is heading a cross-domain the browser will add an 'Host' header while postman do'nt and it will accpect to see in result from server the header 'Access-Control-Allow-Origin' ,this is why in case of CORS problem you will get the header from postman while from the browser not...if it is a CORS problem ,you should see Error in the console developer tool, do you see any error in the developer tool ? – Omer David Dec 31 '21 at 08:47
I do get an error, yes. "Http failure response" with an error code of 0. I've been trying to do this even with CORS disabled as I mentioned in the OP. It does remove the error - but at the same time I don't receive any data from my GET request. So I'm probably still doing something wrong, or I need to build and deploy this in a production environment I guess. Not quite sure how I'm *meant* to test this. – Dealman Dec 31 '21 at 11:21
http error code 0 means no response from server...to be more accurate if this is a CORS error the browser will cut any response from server... are you working in local environment while getting this error? i am asking because you mentioned you should deploy....basicly it does not matter in which environment you are working the only differnece between the environments is where to solve the problem ,but you first need to understand what is the problem in order to understand how and where to solve it...can you add the way you disabled cors in server ? and where in server ? – Omer David Jan 01 '22 at 21:48

Not Getting Response Header in Angular

1 Answers1