尝试使用 Angular 2 从本地主机访问街景时出现 Google 街景 API CORS 问题

Question

尝试访问全景图时出现以下错误。我随机遇到这个错误。有时会发生，有时则不会，有人可以详细说明我该如何解决这个问题。

错误：从来源“localhost:4200”访问“ https://lh3.ggpht.com/-GEWinvnWrN8/VgoOwiNcv2I/AAAAAAAAA3w/vhFJX1VOvr4fDNV2JmKDPhUUx08MeBqdwCJkC/x0-y0-z0/p ”处的图像已被 CORS 策略阻止：否“ Access-Control-Allow-Origin'标头存在于所请求的资源上。因此，不允许访问源“localhost:4200”。响应的 HTTP 状态代码为 403。

我在尝试访问我也使用 DRF 构建的 API 时遇到了此 CORS 错误。但后来我在我的 API 中使用中间件解决了这个问题。如果图像不在同一域上，谷歌不允许我访问这些图像，这对我来说听起来不合逻辑。我正在研究 Angular 2。这是当用户输入 x=lat 和 y=lon 时我调用的代码。

    var map = new google.maps.Map(document.getElementById('map'), {
             zoom: 15,
             center: {lat: this.x, lng: this.y}
           });
    var panorama = new google.maps.StreetViewPanorama(
                 document.getElementById('pano'), {
                   position:  {lat: this.x, lng: this.y},
                   pov: {
                     heading: 34,
                     pitch: 10
                   }
                 });
    var cafeMarker = new google.maps.Marker({
                       position: {lat: this.x, lng: this.y},
                       map: map,
                       icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
                       title: 'Canteen'
                   });
                   panorama.addListener('position_changed', function() {
                 console.log(panorama.getPosition().lat() +" " + panorama.getPosition().lon());
            });

map.setStreetView(panorama);`

Answer 1

检查index.html中对google API的引用应该是：

src="https://maps.google.com/maps/api/js?key=YOUR-KEY">

（注意 http S）