Google Street View API CORS 각도 2를 사용하여 localhost에서 스트리트 뷰에 액세스하려고 할 때 발생하는 문제

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에서 미들웨어를 사용하여 해결했습니다. Google이 동일한 도메인에 있지 않은 경우 이미지에 액세스하도록 허용하지 않는다는 것이 논리적으로 들리 지 않습니다. 저는 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을 에서 구글 API에 대한 참조를 확인이 있어야한다 :

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

인덱스에서 ** 그것은 ** HTTP S입니다