javascript - 如何在 Angular API 请求的 header 中传递 x-api-key?

标签 javascript angular

<分区>

我正在尝试在 header 中发送 x-api-key header ,如下所示

服务.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());
  }

}

但是,我收到以下错误:

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

如何解决这个问题?有没有其他方法可以传递 x-api-key

最佳答案

这是一个服务器端问题,您必须配置您的服务器以允许所需的 header ,搜索“CORS allow headers”

关于javascript - 如何在 Angular API 请求的 header 中传递 x-api-key?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47853022/

相关文章:

javascript - 无法将图像单击进入预览响应式文件管理器

javascript - 有没有办法让 HTML div 像 body 标签一样工作?

Angular 2可观察订阅两次执行调用两次

javascript - angular2 和 charts.js 交互

javascript - grunt-contrib-imagemin 任务上的 travis-ci 构建失败(无法准备好未定义的属性 'contents'

javascript - 无法检索动态创建的文本区域 jquery 的文本

javascript - 如何使用 jest 使用 Promise.all 设置多次提取测试

angular - Angular 子模块的自定义 RouteReuseStrategy

javascript - Angular 8,用户输入并随用户输入和选定的复选标记一起更新

angular - 错误 TS2339 : Property 'handleError' does not exist on type 'HeroService' with Angular