Angular 2：Google Maps API请求：不存在'Access-Control-Allow-Origin'标头

我正尝试使用Angular 2的HTTP.get（）方法从本地主机发出Google Maps API JavaScript请求。在我的请求中，我需要添加标题，但我试图执行此操作，但收到此错误通知：Angular 2：Google Maps API请求：不存在'Access-Control-Allow-Origin'标头

https://maps.googleapis.com/maps/api/place/textsearch/json?query=Santa+Cruz&key=MY_KEY。对预检请求的响应未通过访问控制检查：否请求的资源上存在“访问控制 - 允许来源”标头。原因'http://localhost:51268'因此不允许访问。

我想要做的就是输入一个城市名称并将响应返回给JSON对象。有人能解释我在这里做错了吗？ Web检查上市

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

错误：

来源

2017-01-23 Les Paul

The answer to my solution is here.我试图使从本地主机CORS的要求，所以我在控制台中输入以下命令：

chrome.exe --disable-web-security

这会在Google Chrome上禁用相同的来源策略，并允许进行API调用。除了为了使您在100％安全的网站开发API调用的目的以外，不应该这样做。我敢肯定，有些人会认为永远不要做。

来源

2017-01-25 03:01:56

您可以下载[Chrome CORS扩展]（https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en）并使用滑动条，可以打开/关闭'Access-Control-Allow-Origin'。你的方式：整个网络安全是关闭的。 – xmux

CORS切换Chrome扩展程序非常适合开发工作，但在移至生产环境时仍会遇到问题。

我花了最后几天试图找到最干净的解决方案，没有太多的运气。 Google提供了一个客户端JavaScript库。但要使用它，你必须对index.html中的脚本文件进行硬编码，我完全不同意（想想：如果设备没有互联网连接，你将如何处理错误？）

我还发现谷歌已经弃用从API的第2版到第3版的JSONP，这很糟糕，因为这将是理想的解决方法。

相反，只有真正的解决方案，我能找到的是成立这是CORS正确配置，并作为您的离子应用程序和谷歌API之间的代理一个超级简单的NodeJS /快速后端。

这是我第一次尝试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的概念相同。

来源

2017-12-31 09:24:24

Angular 2：Google Maps API请求：不存在'Access-Control-Allow-Origin'标头

回答

相关问题