Angular 调用Google Places API时Ionic 2 CORS问题

我使用Ionic CLI创建了一个新项目，它使用Angular 2。我正在尝试调用GooglePlaceAPI，但我一直收到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());
  }


}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Headers，RequestOptions}；
从'rxjs/Rx'导入{Observable}；
导入'rxjs/add/operator/map'；
从“../models/Place”导入{Place}；
@可注射（）
出口班学额{
private apiKey=“KEY\u转到这里”；
私有apiUrl=”https://maps.googleapis.com/maps/api/place";
私有头=新头（{'Accept'：'application/json'}）
私有选项=新请求选项（{}）；
构造函数（公共http:http）{
this.headers.append（“访问控制允许来源”、“*”）；
this.headers.append（“访问控制允许标头”、“来源、内容类型、接受、授权”）；
append（“访问控制允许方法”、“GET、POST、PUT、DELETE、OPTIONS、HEAD”）；
this.options.headers=this.headers；
}
getPlaces（关键字：字符串）：可观察{
返回this.http.get（`${this.apirl}/textsearch/json？query=`+encodeURIComponent（关键字）+`&key=`+this.apiKey，this.options）
.map（res=>res.json（））；
}
}

为什么我不能在我的ionic应用程序中进行API调用？我怎样才能修好它

---

如果删除标题，则会出现一般的CORS错误。

使用CORS切换google chrome扩展。默认情况下，在chrome中，本地主机禁用CORS。请使用CORS切换google chrome扩展。默认情况下，在chrome中，本地主机禁用了CORS。CORS toggle chrome扩展非常适合开发工作，但当您进入生产环境时，您仍然会遇到这个问题

我花了几天时间试图找到最干净的解决方案，但运气不太好。谷歌确实提供了一个客户端JavaScript库。但是要使用它，你必须在

index.html

中硬编码一个脚本文件，我完全不同意（想想：如果设备没有互联网连接，你会如何处理错误？）

我还发现，Google在从API的v2版迁移到v3版后，已经弃用了

JSONP

，这很糟糕，因为这本来是一个理想的解决方案

相反，我能找到的唯一真正的解决方案是设置一个超级简单的NodeJS/Express后端，该后端为CORS正确配置，并充当您的Ionic应用程序和Google API之间的代理

---

这是我第一次尝试Node，设置它并不太困难。我在这里写了一个指南：并在这里创建了一个Git repo示例：

CORS toggle Chrome扩展对于开发工作非常有用，但是当您进入生产环境时，您仍然会遇到这个问题

我花了几天时间试图找到最干净的解决方案，但运气不太好。谷歌确实提供了一个客户端JavaScript库。但是要使用它，你必须在

index.html

中硬编码一个脚本文件，我完全不同意（想想：如果设备没有互联网连接，你会如何处理错误？）

我还发现，Google在从API的v2版迁移到v3版后，已经弃用了

JSONP

，这很糟糕，因为这本来是一个理想的解决方案

相反，我能找到的唯一真正的解决方案是设置一个超级简单的NodeJS/Express后端，该后端为CORS正确配置，并充当您的Ionic应用程序和Google API之间的代理

这是我第一次尝试Node，设置它并不太困难。我在这里写了一个指南：并在这里创建了一个Git回购示例：