首页 文章

Angular 2 Http获取请求标头问题

提问于
浏览 次
0

我的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())
    }
}

控制台日志在 Headers 之前

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'访问 .

http angular get header cors

1 回答

  • 1

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

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

    但是，如果直接从Javascript实现请求，则需要正确添加X-Auth-Token，以便API允许您执行此操作

    所以要从你的应用程序调用api，你需要添加 Headers ：

    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())
}
    回复于

相关问题