Угловой 2 сторонний API

Question

Я пытаюсь обратиться к API, который отлично работает с Postman, но не работает в моем приложении с угловым 2. Я сделал тест api до http://date.jsontest.com, чтобы проверить, работает ли все с http в угловом2 правильно и так.

Сообщение об ошибке, которое я получаю: 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 в качестве сервера. Эти двигатели отлично справляются с прокси-сервером и обратным прокси.