搜尋

首頁  >  問答  >  主體

Google Maps API: 要求的資源缺少「Access-Control-Allow-Origin」頭資訊

<p>我看到很多人問過這個問題,但沒有一個答案對我有效。 </p> <p>我正在嘗試使用react/axios來呼叫google maps api。 </p> <p>這是我的get請求:</p> <pre class="brush:php;toolbar:false;">componentDidMount() { axios({ method : 'get', url : `http://maps.googleapis.com/maps/api/js?key=${key}/`, headers: { "Access-Control-Allow-Origin": '*' "Access-Control-Allow-Methods": 'GET', }, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); }</pre> <p>這是錯誤訊息:</p> <pre class="brush:php;toolbar:false;">XMLHttpRequest無法載入http://maps.googleapis.com/maps/api/js? key=xxxxxxxxx/. 回應預檢請求未通過存取控制檢查:請求的資源上沒有'Access-Control-Allow-Origin'頭。因此,來自'http://localhost:3000'的訪問被拒絕。 </pre> <p>我讀了其他人指向的關於CORS的文章 https://www.html5rocks.com/en/tutorials/cors/</p> <p>但我在那裡找不到解決我的問題的答案。 </p>
P粉993712159P粉993712159464 天前451

全部回覆(1)我來回復

  • P粉384244473

    P粉3842444732023-08-23 20:45:44

    https://maps.googleapis.com/maps/api不支援從前端JavaScript中的網路應用程式取得請求,以您的程式碼嘗試使用它的方式。

    相反,您必須使用支援的Google Maps JavaScript API,其客戶端程式碼與您嘗試的方式不同。一個距離矩陣服務範例如下:

    <script>
      var service = new google.maps.DistanceMatrixService;
      service.getDistanceMatrix({
        origins: [origin1, origin2],
        destinations: [destinationA, destinationB],
        travelMode: 'DRIVING',
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    },…
    </script>
    
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    

    這裡是使用Place Autocomplete API的範例使用Places函式庫

    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13
        });
        ...
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);
        var infowindow = new google.maps.InfoWindow();
        var infowindowContent = document.getElementById('infowindow-content');
        infowindow.setContent(infowindowContent);
        var marker = new google.maps.Marker({
          map: map,
          anchorPoint: new google.maps.Point(0, -29)
        });
    </script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
      async defer></script>
    

    像這樣使用Maps JavaScript API-透過使用