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

Question

我正在集成一个新的 API 端点。作为端点期望的安全措施在 post 请求中 headers:

 'x-client-key': 'FRONTEND'

我一直在网上四处寻找，但似乎找不到在我的特定情况下如何实施。

如何在我的请求中添加这个？

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

这是我试过但不起作用的方法...

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

我也试过了

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

Answer 1

我假设你使用的是 Angular，不确定是哪个版本，所以我会为 pre-7 和 post-7 写一个解决方案 Angular:

Angular 6岁或以下：

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 或更高版本：将 class Headers 替换为 class HttpHeaders、docs here.

首先，导入 HttpHeaders class:

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

然后将您的代码重构为：

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

最初采用的解决方案。

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

Angular 8 - How to add to my request header a X-Auth-Token?

javascript

authentication

request