Google Maps API: 要求的資源缺少「Access-Control-Allow-Origin」頭資訊
P粉993712159
2023-08-23 00:23:21
<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>
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-透過使用
Google故意不允許透過axios或AJAX方法等其他函式庫發送請求或直接使用XHR或Fetch API存取Google Maps API。