0

Desde Angular quiero conectarme a la api jsonplaceholder, pero sale error de CORS ¿Cómo se soluciona esto?

introducir la descripción de la imagen aquí

Mi servicio:

export class ApiService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any>{
    const url = 'https://jsonplaceholder.typicode.com/photos';
    return this.http.get(url);
  }

}

component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-api-placeholder',
  templateUrl: './api-placeholder.component.html',
  styleUrls: ['./api-placeholder.component.scss']
})

export class ApiPlaceholderComponent implements OnInit {

  data:Array<any>;

  constructor(
    private api: ApiService
  ) { 
    this.data = new Array<any>();
  }

  ngOnInit(): void {
   this.getPhotos();
  }

  getPhotos(){
    this.api.getData().subscribe(
      (data) => {
        console.log(data);
        this.data = data;
      },
        err => console.error('api data failed')
    );
  }

}
8
  • La web jsonplaceholder.typicode.com no implementa CORS, por lo que no puedes hacer llamadas ajax desde otro dominio: github.com/typicode/jsonplaceholder/issues/159 el 22 abr. 2021 a las 14:27
  • gracias por responder!, entonces no hay forma que desde Angular pueda traer los datos de la api para mostrarlos en la vista?
    – Claudio
    el 22 abr. 2021 a las 14:31
  • Desde Angular o desde cualquier otro framework: las llamadas son canceladas por tu navegador el 22 abr. 2021 a las 14:36
  • ¿Responde esto a tu pregunta? Falta la cabecera CORS 'Access-Control-Allow-Origin' el 22 abr. 2021 a las 14:37
  • gracias! esa documentación ayudaria a configurar el CORS desde un servidor, yo la api la estoy consumiendo directamente de forma local con angular sin ningun servidor de por medio como node/express.
    – Claudio
    el 22 abr. 2021 a las 15:51

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.