Angular 2：Google Maps API 請求：不存在“Access-Control-Allow-Origin”標頭

Question

我正在嘗試使用 Angular 2 的 HTTP.get() 方法從本地主機發出 Google Maps API JavaScript 請求。 在我的請求中，我需要添加標頭並嘗試執行此操作，但收到此錯誤通知：

https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&key=MY_KEY 。 對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此，不允許訪問 Origin ' http://localhost:51268 '。

我想要做的就是輸入一個城市名稱並讓響應返回一個 JSON 對象。 有人可以解釋一下我在這里做錯了什么嗎？

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);
    }
}

Web Inspector 中列出的錯誤：

Answer 1

CORS 切換 Chrome 擴展程序非常適合開發工作，但是當您進入生產環境時，您仍然會遇到這個問題。

在過去的幾天里，我一直試圖為此找到最干凈的解決方案，但運氣不佳。 Google 確實提供了一個客戶端 JavaScript 庫。 但是要使用它，你必須在index.html硬編碼一個我完全不同意的腳本文件（想想：如果設備沒有互聯網連接，你會如何處理錯誤？）

我還發現，在從 API 的 v2 移動到 v3 之后，谷歌已經棄用了JSONP ，這很糟糕，因為那本來是理想的解決方法。

相反，我能找到的唯一真正的解決方案是設置一個超級簡單的 NodeJS/Express 后端，它為 CORS 正確配置並充當您的 Ionic 應用程序和 Google API 之間的代理。

這是我第一次嘗試使用 Node，設置它並不太難。 我在這里寫了一個指南： https : //www.technouz.com/4674/use-google-places-api-ionic-3-simple-nodejs-backend-heroku/並在這里創建了一個示例 Git 存儲庫： https:/ /github.com/zuperm4n/super-simple-nodejs

我遇到了 Ionic 應用程序的問題，但它與 Angular 的概念相同。

Answer 2

我的解決方案的答案在這里。 我試圖從本地主機發出 CORS 請求，因此我在控制台中輸入了以下命令：

chrome.exe --disable-web-security

這會禁用 Google Chrome 上的同源策略並允許 API 調用。 除非為了在開發中使用您 100% 安全的站點進行 API 調用，否則不應這樣做。 我相信有些人會爭辯說它永遠不應該做。