Angular 8 - 如何向我的请求 header 添加 X-Auth-Token？

Question

I'm working in the integration of a new API endpoint. As a security measure the endpoint expects in the post request headers:

 'x-client-key': 'FRONTEND'

I have been looking around the net, but can't seem to find how to implement in my particular case.

How could I add this in my request?

  getMagic(data) {
    return new Promise((resolve, reject) => {
      this.http
        .post(environment.serverUrl + this.getApiEndPoint() + 'get-magic', data)
        .subscribe(
          (response: any) => {
            resolve(response);
          },
          (err) => {
            console.log(err);
            reject(err);
          }
        );
    });
  }

This is what I've tried but doesn't work...

    const headers = new Headers().set('Content-Type', 'application/json').set('x-client-key',  'FRONTEND_CLIENT_KEY ');

    return new Promise((resolve, reject) => {
      this.http
        .post(environment.serverUrl + this.getApiEndPoint() + 'get-geocoding', data, { headers: headers })
        .subscribe(
          (response: any) => {
            resolve(response);
          },
          (err) => {
            console.log(err);
            reject(err);
          }
        );
    });
  }

I tried also

const headers = new Headers();
headers.set('Content-Type', 'application/json');
headers.set('x-client-key',  'FRONTEND_CLIENT_KEY ');

Answer 1

I assume that you're using Angular, not sure which version, so I'll write a solution for pre-7 and post-7 Angular:

Angular 6 or below:

const headers = {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Access-Control-Allow-Headers': 'Content-Type',
  'x-client-key': 'your key'
}

const requestOptions = {
  headers: new Headers(headers),
};

return new Promise((resolve, reject) => {
  this.http
    .post(environment.serverUrl + this.getApiEndPoint() + 'get-geocoding', data, requestOptions)
    .subscribe(
      (response: any) => {
        resolve(response);
      },
      (err) => {
        console.log(err);
        reject(err);
      }
    );
});

Angular 7 or later: replace the class Headers with a class HttpHeaders , docs here .

First, import the HttpHeaders class:

import { HttpHeaders } from '@angular/common/http';

And then refactor your code into:

const requestOptions = {                                                                                                                                                                                 
  headers: new HttpHeaders(headers), 
};

Solution originally taken from here .