Angular 2 个第三方 API

Question

我正在尝试联系一个 API，它可以完美地与 Postman 配合使用，但在我的 angular 2 应用程序中不起作用。我对 api 到 http://date.jsontest.com 进行了测试，以查看 angular2 中带有 http 的所有内容是否正常工作并且确实如此。

我收到的错误消息是： XMLHttpRequest 无法加载 https://tsp.touchstream.global/api/rest/stream_enable/a85a58c7/。预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 X-TS-ID。

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/stream_enable/a85a58c7/ 访问服务器，您可以修改其 CORS 设置以接受提到的 header 字段。

但是将所有请求反向代理到该服务器会更容易。您可以将服务器配置为 proxy-pass 所有对 /tsp-api/* 的请求到 https://tsp.touchstream.global/api/*。在您的 angular2 应用程序中，只需请求 '/tsp-api/rest/stream_enable/' + streamKey +'/'。这样，您的请求将是同源的，避免所有 CORS 头痛

您可能希望使用 nginx 或 apache2 作为您的服务器引擎。这些引擎完美地处理代理和反向代理。

Angular 2 个第三方 API

Angular 2 third party API

angular-http

mean-stack

angular