Google Maps API：請求的資源上沒有'Access-Control-Allow-Origin'標頭

我看過這個問題被多個人問過，沒有任何答案對我有用。Google Maps API：請求的資源上沒有'Access-Control-Allow-Origin'標頭

我正在嘗試使用react/axios調用Google Maps API。

這是我的GET請求：

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); 
}); 
}

這是錯誤消息：

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/js? 
key=xxxxxxxxx/. Response to preflight request doesn't pass access control 
check: No 'Access-Control-Allow-Origin' header is present on the 
requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我讀過的文章CON CORS其他人都點 https://www.html5rocks.com/en/tutorials/cors/

但我無法在那裏找到我的問題的答案。

來源

2017-06-02 jaimefps

https://maps.googleapis.com/maps/api不支持以您的代碼嘗試使用它的方式從Web應用中運行的前端JavaScript獲取請求。

相反，您需要使用支持的Google Maps JavaScript API，其客戶端代碼與您嘗試的不同。一個sample for the Distance Matrix service看起來更像是這樣的：

<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>

而這裏使用的地方自動填充API using the Places library一個例子：

<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>

使用Google Maps的JavaScript API類似，由script元素的方式來加載庫，然後使用google.maps.Map和其他google.maps.*方法 - 是從運行瀏覽器的前端JavaScript代碼向Google Maps API發出請求的唯一支持方式。

Google故意不允許通過在其他此類庫中使用axios或AJAX方法發送的請求訪問Google Maps API，也不允許直接使用XHR或Fetch API訪問Google Maps API。

來源

2017-06-03 00:39:57 sideshowbarker

Google Maps API：請求的資源上沒有'Access-Control-Allow-Origin'標頭

回答

相關問題