How to pass x-api-key in headers in Angular API request?

Question

I am trying to send x-api-key header in headers as shown below

service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class InsuranceServiceService {

  public token: string;
  constructor(private http: Http) {
    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
    this.token = currentUser && currentUser.token;
   }

  createAuthorizationHeader(headers: Headers) {
    headers.append('Content-Type', 'application/json');
    headers.append('x-api-key', `xxxxxxxxxxxxxxxxxxxx`);
  }

  sendOTP(data: object): Observable<Object[]> {
    const header = new Headers();
    this.createAuthorizationHeader(header);
    return this.http.post('http://my-omain.com/', data, 
    {
      headers: header
    })
    .map((response: Response) => response.json());
  }

}

But, i'm getting the following error:

Request header field x-api-key is not allowed by Access-Control-Allow-Headers in preflight response.

How to fix this issue? Is there any alternate way to pass x-api-key?

score -1 · Accepted Answer · answered Dec 17 '17 at 08:07

-1

This is a server side issue, you have to configure your server to allow the needed header, search for "CORS allow headers"

answered Dec 17 '17 at 08:07

amd

20,637
6
49
67

4

This is not a concrete solution. Why add it as answer? Should be a comment IMO – Jota.Toledo Dec 17 '17 at 08:42
Thx @amd this is helpful – Hadi Dec 17 '17 at 14:50

How to pass x-api-key in headers in Angular API request?

1 Answers1

Linked