调用 Google Places API 时出现 Ionic 2 CORS 问题

Question

我使用使用 Angular 2 的 Ionic CLI 创建了一个新项目。我正在尝试调用Google Place API，但我不断遇到CORS问题。我能够调用 API 并在 Postman 和 Chrome 中获取数据，但是当我尝试在 Ionic 应用程序中进行调用时，它不起作用。

这是我在浏览器控制台中遇到的当前错误：

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/textsearch/json?query=steak&key=API_KEY_GOES_HERE. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

这是我尝试添加一些标头后在提供程序中的代码：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Place } from '../models/place';
@Injectable()
export class Places {
private apiKey = "KEY_GOES_HERE";
private apiUrl = "https://maps.googleapis.com/maps/api/place";
private headers = new Headers({ 'Accept': 'application/json' })
private options = new RequestOptions({});
constructor(public http: Http) {
this.headers.append("Access-Control-Allow-Origin", "*");
this.headers.append("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
this.headers.append("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
this.options.headers = this.headers;
}
getPlaces(keyword:string): Observable<Place[]> {
return this.http.get(`${this.apiUrl}/textsearch/json?query=` + encodeURIComponent(keyword) + `&key=` + this.apiKey, this.options)
.map(res => <Place[]>res.json());
}

}

为什么我无法在我的 ionic 应用程序中进行 API 调用？我该如何解决它？

如果我删除标头，则会出现通用 CORS 错误。

Answer 1

使用CORS切换谷歌浏览器扩展程序。默认情况下，在 chrome 中对本地主机禁用 CORS

Answer 2

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