Google Places API：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我尝试从 Angular 应用程序拨打电话，但收到以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

这是我的代码：

constructor(private http: Http) { 
  }

getNearbyRestaurants(lat: number, lng: number){
    return this.http.get(this.API_URL+this.API_KEY+`&location=${lat},${lng}`).pipe(
      map(result => result)
        );
      }
    }

有人知道如何解决这个问题吗？谢谢

Answer 1

您尝试通过 AJAX 请求使用 Places API Web 服务调用。在这种情况下，您将面临同源策略。不幸的是，Google 服务器不会在响应中设置 CORS 标头，并且您的浏览器会阻止此请求。

Google 假设 Places API Web 服务请求是在服务器端执行的，但您尝试在客户端执行。对于客户端，Google 在 Maps JavaScript API 中有一个地点库，提供类似于 Web 服务的功能。

为了解决您的问题，您应该使用 Maps JavaScript API 的地点库或创建中间服务器，将请求发送到 Google 并将结果传递回您的 Angular 应用程序。

您可以在https://developers.google.com/maps/documentation/javascript/examples/place-search上查看使用 Maps JavaScript API 地点库编写的附近搜索示例

我希望这有帮助！