Angular / API consuming - request header - CORS proxy

Question

I am stuck.. Please help.

I am trying to fetch data from an API (the API is already set-up).

I can successfully fetch the data when using Postman. I just add as header the x-api-key.

I would need to send GET requests and each request must contain a private API-Key in the http request-header like in the following example: x-api-key: TcKkYuizu67bsamplexeF4AGTnGWgY7E8MCiTEST

But I can't seem to successfully add the x-api-key in the header, using Angular. I thought that it was because of CORS preflight, but I am almost certain this is not the reason.

I have added CORS changer and Postman Interceptor extensions.

Using the Postman Interceptor extension, I noticed that something is not right. The x-api-key is not classified as a header at all and the key itself can't be found:

Here are the errors from Chrome console:

And here is my app.component.ts code:

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 Node: 11.3.0

`x-api-key` is not a [CORS safelisted request header](https://fetch.spec.whatwg.org/#cors-safelisted-request-header). It will trigger an OPTIONS request which must have a successful response or the XHR will be blocked by browser. — georgeawg, Dec 13 '18 at 14:48
Did not know that. Thank you! How would you advise me to bypass this? — benzata, Dec 13 '18 at 15:03
There's no way for chrome plugin to modify the response HTTP status code based on current chrome extension API. The solution is to use a CORS proxy that responds properly to the OPTIONS request. For more information, see [Disable same origin policy in Chrome](https://stackoverflow.com/a/27897421/5535245). — georgeawg, Dec 13 '18 at 16:53
@georgeawg Thank you very much!!!! I managed to do like this - instead of requesting http://example.com, I changed it to https://cors-anywhere.herokuapp.com/http://example.com. And it returned the proper values!! Thanks! I've been busting my head for a long, long time!! — benzata, Dec 14 '18 at 12:09

score 1 · Answer 1 · answered Dec 13 '18 at 14:40

1

Content-Type header specifies the media type of the request objects you're sending to the server. Because you're just getting JSON data from the server you should set the Accept header to the kind of response you want i.e., Accept: application/json.

answered Dec 13 '18 at 14:40

Viseshini Reddy

656
2
12

Thank you very much! But it still does not solve the issue. Options request (pre-flight) + 403 (forbidden). – benzata Dec 13 '18 at 15:04
Did you try setting only the authorization header? Like this - `headers: new HttpHeaders({ 'Accept': 'application/json', 'Authorization': 'PE84t4CCUC5e7JaGqSeyH7WdRfU6rhoRa6*****' })` – Viseshini Reddy Dec 14 '18 at 04:15
I managed to do it by adding https://cors-anywhere.herokuapp.com/http://example.com to the targeted API address :))) – benzata Dec 14 '18 at 12:10

score 1 · Accepted Answer · answered Dec 14 '18 at 17:42

x-api-key is not a CORS safelisted request header. It will trigger an OPTIONS request which must have a successful response or the XHR will be blocked by browser.

There's no way for chrome plugin to modify the response HTTP status code based on current chrome extension API. The solution is to use a CORS proxy that responds properly to the OPTIONS request. For more information, see Disable same origin policy in Chrome.

Angular / API consuming - request header - CORS proxy

2 Answers2