使用angular/Http头不会随请求一起传递

我是Angular的新手，我正在尝试调用REST服务来获取用于填充注册页面下拉列表的组织列表。我的登录页面工作正常，我得到一个令牌并将其存储在localStorage中。根据console.log（）语句，在注册流期间也会检索该令牌，但它只是没有随请求一起传递到头中。以下是chrome开发工具的标题列表。

这是我的http.service.ts

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';


@Injectable()
export class HttpService {

  constructor (public http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    console.log('HttpService createAuthorizationHeader called');
    let tok = JSON.parse(localStorage.getItem('currentUser')).token;
    console.log(tok);
    //headers.append('X-Authorization', 'Bearer  ' + tok);
    headers.set('X-Authorization', 'Bearer  ' + tok);
  }

  get(url) {
    let headers = new Headers();
    console.log('HttpService get called- ' + url);
    this.createAuthorizationHeader(headers);
   /* let tok = JSON.parse(localStorage.getItem('currentUser')).token;
    console.log(tok);
    //headers.append('X-Authorization', 'Bearer  ' + tok);
    headers.set('X-Authorization', 'Bearer  ' + tok);*/

    let options = new RequestOptions({ headers: headers });

    console.log(headers.toJSON());
    return this.http.get(url, options).map(res => res.json());
  }

  post(url, data) {
    let headers = new Headers();
      this.createAuthorizationHeader(headers);
    return this.http.post(url, data, {
      headers: headers
    });
  }
}

这就是我所说的

import { Injectable, OnInit } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import {HttpService} from './http.service';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Organization} from '../../model';

@Injectable()
export class OrganizationService implements OnInit {
  orgs: Organization[];
  constructor(private http: HttpService) { this.http = http}
  ngOnInit() {
    console.log('ngOnInit OrganizationService called.');
  }
  getOrganizations(): any {
    console.log('getOrganizations OrganizationService called.');
    // get the token here from localstorage and add to header.
     return  this.http.get('http://localhost:9966/api/getOrganizations')
      .subscribe(result => {
        console.log( result );
    });
     /* .map((res) => {
      console.log('got http response');
      console.log(res.json());
      return res.json();
    } );*/

      //return this.orgs;
  }
}

---

问题是请求中没有传递“X-Authorization”头值。这就是服务器返回401状态的原因。我也尝试过使用RequestOptions，但仍然存在相同的问题。感谢您在改写答案以适应您的结构方面提供的帮助

HttpService:

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

@Injectable()
export class HttpService {

  constructor(private http: Http) { }

  createAuthorizationHeader(): Headers {
    let tok = 'My token';
    return new Headers({ 'X-Authorization': `Bearer ${tok}` })
  }

  get(url): Observable<any> {
    return this.http.get(url, { headers: this.createAuthorizationHeader() }).map(res => res.json());
  }
}

请求：

---

您正在使用RequestOptions，但get方法需要RequestOptions参数。只需将代码更改为：

get(url) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);

    let options = { headers: headers }; // HERE
    return this.http.get(url, options)
       .map(res => res.json());
}

---

谢谢Markus和LLL的帮助。我想我知道发生了什么。CORS正在运作。 我使用Chrome进行测试，Chrome更安全，发送飞行前选项请求，其中不包含我添加的标题。我不得不在服务器端通过不响应401来处理选项请求。现在Chrome正在发送第二个请求（选项成功后），并带有正确的头

---

IE的测试与我的原始服务器端代码配合得很好。：）

谢谢你的建议，试过了，但还是一样的问题。@LL，似乎我添加的所有标题都在“访问控制请求标题”下。请参阅dev工具输出。“选项/api/getOrganizations HTTP/1.1主机：本地主机：9966连接：保持活动缓存控制：最大年龄=0访问控制请求方法：获取来源：访问控制请求头：内容类型，x授权接受：/Referer:接受编码：gzip，deflate，sdch，br接受语言：en-US，en；q=0.8”

import { Component, OnInit } from '@angular/core';
import { OrganizationService } from '../organization.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  constructor(private orgranizationService: OrganizationService) { }

  ngOnInit() {
    this.orgranizationService.getOrganisations().subscribe(resp =>
      console.log(resp));
  }
}

get(url) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);

    let options = { headers: headers }; // HERE
    return this.http.get(url, options)
       .map(res => res.json());
}