Angular 2 Http Get Request header issue

Question

My Angular 2 Service вызывает и внешний api, но я получаю сообщение об ошибке в консоли браузера. Я попытался добавить заголовки в метод Get, но ошибка сохраняется.

служба

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

@Injectable() 

export class CompetitionService{ 

    constructor(private http:Http){ 

    } 

    getCompetitions(){ 
     let headers = new Headers(); 
     headers.append('Access-Control-Allow-Credentials', 'true'); 
     headers.append('Access-Control-Allow-Methods', 'GET'); 
     headers.append('Access-Control-Allow-Origin', '*'); 
     return this.http.get('http://api.football-data.org/v1/competitions',{headers:headers}).map(response => response.json()) 
    } 
} 

журнала консоли Перед Заголовок

XMLHttpRequest не может загрузить http://api.football-data.org/v1/competitions. Нет Заголовок «Access-Control-Allow-Origin» присутствует на запрошенном ресурсе . Origin 'http://localhost:3000' поэтому не разрешен доступ.

После заголовка XMLHttpRequest не может загрузить http://api.football-data.org/v1/competitions. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Origin 'http://localhost:3000', следовательно, не допускается.

Answer 1

это CORS проблема в браузере и футбол-данных апи

http://api.football-data.org/docs/v1/index.html#_cors_handling

Однако, если вы реализуете запросы непосредственно из Javascript, что вам нужно правильно добавить свой X-Auth-Токен так API дает разрешение на сделать

так, чтобы позвонить API из вашего приложения, то вам нужно добавить заголовок:

getCompetitions(){ 
    let headers = new Headers(); 
    let token = 'your token'; 
    headers.append('X-Auth-Token', token); 
    return this.http.get('http://api.football-data.org/v1/competitions',{headers:headers}).map(response => response.json()) 
}