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”标头 资源。因此不允许使用原点“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 之后，Google 已经弃用了 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

The answer to my solution is here. 我试图从本地主机发出 CORS 请求，所以我在控制台中输入了这个命令：

chrome.exe --disable-web-security

这会禁用 Google Chrome 上的同源策略并允许 API 调用。除非为了在开发中使用您 100% 安全的网站进行 API 调用，否则不应这样做。我敢肯定，有些人会争辩说永远不要这样做。