Question

我的Angular 2服务正在调用和外部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”标头资源。因此不允许来源“http://localhost:3000” 访问。

Header之后 XMLHttpRequest无法加载http://api.football-data.org/v1/competitions。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:3000”访问。

Answer 1

这是浏览器和足球数据api中的CORS问题

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

但是，如果直接从Javascript实现请求，则需要正确添加您的X-Auth-Token，以便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())
}

Angular 2 Http获取请求标头问题

1 个答案: