Estoy tratando de hacer una solicitud de JavaScript de la API de Google Maps desde un host local usando el método HTTP.get () de Angular 2. En mi solicitud, necesito agregar encabezados e intenté hacerlo, pero recibí este aviso de error:

https://maps.googleapis.com/ maps / api / place / textsearch / json? query = Santa + Cruz & key = MY_KEY. La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: No El encabezado 'Access-Control-Allow-Origin' está presente en el recurso. Por lo tanto, el origen 'http: // localhost: 51268' no está permitido acceso.

Todo lo que quiero hacer es ingresar el nombre de una ciudad y que la respuesta regrese con un objeto JSON. ¿Alguien puede explicar qué estoy haciendo mal aquí?

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class SearchService {
    dataHere: Object;
    errorMessage: String;

    constructor(private http: Http) { }

    getPlaces(name: String): Observable<any> {
        const url = "https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&key=MY_KEY";
        let headers = new Headers({ 'Access-Control-Allow-Origin': '*','Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.get(url, options)
            .map(r => this.dataHere = r.json())
            .catch((error:any) => Observable.throw(error.json().error));
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

Errores listados en Web Inspector:

enter image description here

1
Les Paul 24 ene. 2017 a las 00:59

2 respuestas

La mejor respuesta

La respuesta a mi solución está aquí. Intenté hacer una solicitud CORS de un localhost, así que ingresé este comando en mi consola:

chrome.exe --disable-web-security

Esto deshabilita la misma política de origen en Google Chrome y permite llamadas API. Esto NO debe hacerse excepto con el propósito de hacer llamadas API en desarrollo con sitios en los que está 100% seguro. Estoy seguro de que hay quienes dirían que NUNCA debería hacerse.

0
Community 23 may. 2017 a las 11:54

La extensión de Chrome para alternar CORS es ideal para el trabajo de desarrollo, pero aún se encontrará con el problema cuando pase a producción.

Pasé los últimos días tratando de encontrar la solución más limpia para esto sin mucha suerte. Google ofrece una biblioteca de JavaScript del lado del cliente. Pero para usarlo, debe codificar un archivo de script en index.html con el que estoy totalmente en desacuerdo (piense: ¿qué pasa si el dispositivo no tiene conexión a Internet, cómo manejaría los errores?)

También descubrí que Google ha dejado de utilizar JSONP después de pasar de la v2 de la API a la v3, lo cual apesta porque esa habría sido la solución ideal.

En cambio, la única solución real que pude encontrar fue configurar un back-end NodeJS / Express súper simple que está configurado correctamente para CORS y actúa como un proxy entre su aplicación Ionic y la API de Google.

Fue la primera vez que probé Node y no fue demasiado difícil configurarlo. Escribí una guía aquí: https://www.technouz.com/4674/use-google-places-api-ionic-3-simple-nodejs-backend-heroku/ y también creó un ejemplo de repositorio de Git aquí: https://github.com/zuperm4n/super-simple-nodejs

Estaba teniendo el problema con una aplicación Ionic, pero es el mismo concepto para Angular.

1
Zahid Mahmood 31 dic. 2017 a las 09:24