角2サードパーティAPI

Question

私は、Postmanで動作するAPIに手を加えようとしていますが、角度2のアプリケーションでは機能しません。私はhttp://date.jsontest.comにテストapiを作って、angular2のhttpがすべて正しく動作しているかどうかを確認しました。

エラーメッセージが表示される： XMLHttpRequestはhttps://tsp.touchstream.global/api/rest/stream_enable/a85a58c7/をロードできません。要求ヘッダーフィールドX-TS-IDは、プリフライト応答でAccess-Control-Allow-Headersによって許可されません。

operations.service.ts

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

import {Observable} from "rxjs/Observable"; 
import 'rxjs/Rx'; 

@Injectable() 

export class OperationsService { 
listSingleStream(channel) { 
    const streamKey = channel; 
    const url = 'https://tsp.touchstream.global/api/rest/stream_enable/' + streamKey +'/'; 
    console.log(url) 
    const headers = new Headers({ 
     'Content-Type': 'application/json', 
     'Authorization': 'Bearer ********key*********', //private keys 
     'X-TS-ID': '********key*********' 
    }); 
    return this._http.get(url, {headers: headers}) 
     .map(response => response.json()) 
     .catch(error => Observable.throw(error.json())) 
}} 

touchstream.component.ts

import {Component, OnInit} from "@angular/core"; 
import {FormBuilder, ControlGroup, Validators, Control} from "@angular/common"; 

import {OperationsService} from "../operations.service"; 
import {Router} from "@angular/router/src/router"; 
import {ErrorService} from "../../error/error.service"; 



@Component({ 
    moduleId: module.id, 
    selector: 'touchstream', 
    templateUrl: 'touchstream.component.html', 

}) 
export class TouchstreamComponent implements OnInit { 
    singleChForm: ControlGroup; 
    channelInfo:string; 

    constructor(private _fb:FormBuilder, private _operationService: OperationsService, private _router: Router, private _errorService: ErrorService) {} 

    ngOnInit() { 
    this.singleChForm = this._fb.group({ 
     channel: ['', Validators.required] 
    }); 
} 
onSingleSearch() { 
    console.log(this.singleChForm.value.channel); 
    const channel = this.singleChForm.value.channel 
    this._operationService.listSingleStream(channel) 
     .subscribe(
      data => this.channelInfo = JSON.stringify(data), 
      error => console.log('error'), 
      () => console.log(this.channelInfo) 
     ) 
    } 
} 

Answer 1

サーバーへのアクセス権を持っている場合はそれがCORS Wiki link

に問題ですhttps：//tsp.touchstream.global/api/rest/strea m_enable/a85a58c7 /の場合、前述のヘッダーフィールドを受け付けるようにCORS設定を変更できます。

しかし、すべてのリクエストをそのサーバーにリバースする方が簡単です。/tsp-api/*へのすべての要求をhttps：//tsp.touchstream.global/api/*に委譲するようにサーバーを構成することができます。あなたのangular2アプリでは、 '/ tsp-api/rest/stream_enable /' + streamKey + '/'をリクエストするだけです。この方法では、あなたの要求はすべてのCORSの頭痛を避けて、同じ起源のものになります

サーバーエンジンとしてnginxまたはapache2を使用することができます。これらのエンジンはプロキシとリバースプロキシを完全に処理します。