角度/ Httpヘッダーを使用してリクエストを受け付けません

Question

私はAngularの新機能です。RESTサービスを呼び出して、サインアップページのドロップダウンを埋めるために使用する組織のリストを取得しようとしています。私のログインページは正常に動作しています。トークンを取得してlocalStorageに保存します。 console.log（）ステートメントに基づいて、サインアップフロー中にこのトークンも取得されますが、リクエストとともにヘッダーに渡されるだけではありません。ここに、chromeの開発ツールのヘッダリストがあります。ここで enter image description here

これは私が

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-認証' ヘッダの値がで渡されていないことがいかにある私の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 
    }); 
    } 
} 

です要求。そのため、サーバーは401ステータスを返送しています。私はRequestOptionsを使ってみましたが、同じ問題です。この中で助けをお待ちしております。

Answer 1

あなたの構造に合わせて答えを書き直してください。

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

OrganizationService：

import { Observable } from "rxjs/Observable"; 
import { Injectable } from '@angular/core'; 
import { RequestOptions } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { HttpService } from './http.service'; 

@Injectable() 
export class OrganizationService { 

    constructor(private httpService: HttpService) { } 

    getOrganisations(): Observable<any> { 
    return this.httpService.get('/api/organizations'); 
    } 
} 

SignupComponent：

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

のrequ est：

Answer 2

あなたはRequestOptionsを使用していますが、getメソッドにはRequestOptionsArgsが必要です。あなたの助けのために

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

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

Answer 3

おかげでマルクスとLLL：ちょうどこのようにコードを変更します。私は何が起こっていたのか考え出した。 CORSの行動 私はテストのためにChromeを使用していましたが、Chromeはより安全です。私が追加していたヘッダーが含まれていない飛行前のOPTIONSリクエストを送信します。私は401で応答しないことでサーバー側のOPTIONS要求を処理しなければなりませんでした。現在、Chromeは適切なヘッダーを使用して（OPTIONSが成功した後に）2番目の要求を送信しています。

IEのテストは、元のサーバーサイドコードで正常に機能しました。 :)