Angular 2：Google Maps API请求：No＆＃39; Access-Control-Allow-Origin＆＃39;标题存在

Question

我正在尝试使用Angular 2的HTTP.get（）方法从localhost发出Google Maps API JavaScript请求。在我的请求中，我需要添加标题，我试图这样做，但我收到了此错误通知：

  

https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&key=MY_KEY。   对预检请求的响应没有通过访问控制检查：否   ＆＃39;访问控制允许来源＆＃39;标题出现在请求的上   资源。起源＆＃39; http://localhost:51268＆＃39;因此是不允许的   访问。

我想要做的就是输入城市名称，并使用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扩展程序非常适合开发工作，但在迁移到生产环境时仍会遇到问题。

我花了最后几天试图找到最干净的解决方案而没有太多运气。谷歌确实提供了一个客户端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 repo：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调用之外，不应该这样做。我敢肯定会有人认为永远不应该这样做。