0

Estoy intentando agregar las reseñas de google maps a mi app de angular y al hacerlo recibo el error: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

El código que estoy utilizando en mi app es este:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare var google: any;

@Component({
  selector: 'app-referencias',
  templateUrl: './referencias.component.html',
  styleUrls: ['./referencias.component.css']
})
export class ReferenciasComponent{

  ratingDisplay: any;

  onRatingSet($event: number) {
    throw new Error('Method not implemented.');
  }

  reviews: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    const placeId = 'PLACE_ID';
    const apiKey = 'API_KEY';

    const url = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&fields=name,rating,reviews&key=${apiKey}`;

    this.http.get(url).subscribe((data: any) => {
      this.reviews = data.result.reviews;
    });
  }

Obviamente los valores de PLACE_ID y API_KEY ya fueron reemplazados por los correspondientes y mi configuración de credenciales en google esta seteada para que no tenga restricciones. Ya busqué varias soluciones pero no estoy consiguiendo resolverlo.

introducir la descripción de la imagen aquí

2
  • Antes del error veo varias cosas acá: 1. Los requests Http van en un servicio. 2. Token y url van al servicio, pero realmente tendrías que usarlas como variables de entorno. 3. Estas usando tipo any, ¿entonces no estás seguro de que tipo son los datos de algo que tu mismo estás haciendo?, básicamente es complicarse la vida. Usar tipos e interfaces facilitan más y evitan errores.
    – René
    el 26 jun. a las 1:53
  • Por otro lado el error parece ser porque necesitas un backend, igual podrías deshabilitar CORS en el navegador pero no es recomendable por cuestiones de seguridad.
    – René
    el 26 jun. a las 2:00

1 respuesta 1

0

Los problemas de CORS al realizar peticiones a API de terceros desde una app frontend es muy común, te voy a dar una opcion para que lo soluciones, como ya te explicaron en un comentario no deberias tener en tu componentes los requests, tokens...etc deberias crearte un servicio y en lo posible usar modelos en lugar de "any". Pero volviendo al tema... una manera de resolver este problema puntual es usando Proxy. Existen varias opciones algunas de pago otras gratis yo solo te dare una opcion que es muy sencilla de usar. Se trata de este: CORS Anywhere

Primero debes instalarlo:

npm install cors-anywhere

Crea un archivo llamado server.js en el directorio raíz de tu proyecto.

Abre el archivo server.js en un editor de texto y copia el siguiente código de ejemplo proporcionado en la documentación:

var host = process.env.HOST || '0.0.0.0';
var port = process.env.PORT || 8080;
var cors_proxy = require('cors-anywhere');

cors_proxy.createServer({
  originWhitelist: [], // Permite todos los orígenes
  requireHeader: [], // No requiere ningún encabezado adicional
  removeHeaders: [] // No elimina ningún encabezado
}).listen(port, host, function() {
  console.log('CORS Anywhere se está ejecutando en ' + host + ':' + port);
});

Guarda los cambios.

Desde tu terminal, ejecuta el siguiente comando para iniciar el servidor:

node server.js

Ahora usalo en tu metodo ngOnInit() agregando el proxy:

ngOnInit() {
  const placeId = 'PLACE_ID';
  const apiKey = 'API_KEY';
  const proxyUrl = 'http://localhost:8080/';

  const url = `${proxyUrl}https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&fields=name,rating,reviews&key=${apiKey}`;

  this.http.get(url).subscribe((data: any) => {
    this.reviews = data.result.reviews;
  });
}

Espero se solucione tu problema. Suerte ;)

Tu Respuesta

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

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