2

Estoy iniciando en esto de Angular 2 y lo que quiero es interrogar una API rest con Angular 2 Typescript, usando Angular-cli, por ello creé un servicio un modelo y un componente para interrogar a la api.

Componente

import { Component, OnInit } from '@angular/core';
import {LiguesServices} from '../services/ligues.services'
import { ligueModel } from '../models/ligueModel'
@Component({
    selector:'ligues',
    templateUrl: '../templates/ligues.component.html',
    moduleId: module.id
})

export class liguesComponent implements OnInit{

    public liguesList : Array<ligueModel> = [];

    constructor(private service:LiguesServices){}

    ngOnInit(){
        this.service.getLigues().subscribe(
            data => {this.liguesList = data;},
            error => {alert('Error');})

    }
}

HTML

<h2>Ligues de Football</h2>
<p>Liste de ligues</p>
  <div class="row">
    <div class="col s12 m6" *ngFor="let item of liguesList ">
      <div class="card">
        <div class="card-image">
          <img src="../images/football-header.jpg">
          <span class="card-title">{{item.caption}}</span>
          <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
        </div>
        <div class="card-content">
          <p>{{item.league}}, {{item.year}}</p>
        </div>
      </div>
    </div>
  </div>

  <p>{{liguesList}}</p>

Servicio

import { Injectable} from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/Operator/map';
import { ligueModel } from '../models/ligueModel'


@Injectable()
export class LiguesServices{
    constructor(public http: Http){}

    getLigues():Observable<ligueModel[]>{
        const headers = new Headers();
        headers.append('Access-Control-Allow-Headers', 'Content-Type');
        headers.append('Access-Control-Allow-Methods', 'GET');
        headers.append('Access-Control-Allow-Origin', '*');

        return this.http.get('http://api.football-data.org/v1/competitions/?season=2017', {headers: headers})
        .map((res:any) => res.json() as ligueModel[]);
    }
}

Modelo

export class ligueModel{
    public ligueID: number;
    public captation: string;
    public league: string;
    public year: string;
    public currentMatchDay:number;
    public numberOfMatchday: number;
    public numberofTeams: number;
    public numberofGames: number;
    public lastUpdated: string;
}

pero tengo errores al momento de ejecutar Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.football-data.org/v1/competitions/?season=2017. (Reason: missing token ‘access-control-allow-headers’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Estoy usando Mozilla como navegador de prueba

3
  • Revisa qué headers está enviando el browser en la petición. Por lo que dice el error, está enviando un header que no está en la "lista blanca" (ej accept, o X-Requested-With) en donde sólo aceptas Content-Type. Además, al ser cross origin probablemente envía una petición de tipo OPTIONS como preflight y tú sólo estás permitiendo las peticiones GET.
    – ffflabs
    Commented el 6 feb. 2018 a las 0:22
  • de hecho estoy pidiendo datos a la API y si necesito hacer un GET Commented el 6 feb. 2018 a las 11:27
  • Claro, pero puedes aceptar múltiples tipos de verbos, al menos OPTIONS junto con GET
    – ffflabs
    Commented el 6 feb. 2018 a las 12:34

1 respuesta 1

2

Posiblemente te esta bloqueando al hacer una petición a un servidor externo, por CORS (Cross Origin Resource Sharing) tienes que decir de que servidor aceptas la información.

headers.append('Access-Control-Allow-Headers', 'accept', 'Content-Type');

Fuente: aqui

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.