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服务调用。在这种情况下，您将面对Same Origin policy。不幸的是，Google服务器未在响应中设置CORS标头，并且您的浏览器阻止了此请求。

Google假定Places API Web服务请求是在服务器端执行的，但是您尝试在客户端执行此操作。对于客户端，Google在Maps JavaScript API中有一个places library，提供与网络服务类似的功能。

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

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

我希望这会有所帮助！

Google Places API：所请求的资源上没有“ Access-Control-Allow-Origin”标头

1 个答案: