Google Maps API：请求的资源上没有“Access-Control-Allow-Origin”标头 [英] Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述

我见过这个问题被多个人问，没有任何答案对我有用。

我正在尝试向Google发送API调用将api与react / axios进行映射。

这是我的取得要求：

  componentDidMount（）{
 axios（{
方法：'get'，
 url：`http://maps.googleapis.com/maps/api/js?key=$ {key} /`，
标题：{
Access-Control-Allow-Origin：'*'
Access-Control-Allow-Methods：'GET'，
}，
 }）
 .then（function（response）{
 console.log（response）; 
}）
 .catch（function（error）{
 console.log （错误）; 
}）; 
} 
  

这是错误信息：

  XMLHttpRequest无法加载http://maps.googleapis.com/maps/api/js？ 
 key = xxxxxxxxx /。对预检请求的响应不会传递访问控制
检查：
请求的资源上不存在Access-Control-Allow-Origin标头。原因'http：// localhost：3000'因此不被允许访问。 
  

我已阅读文章con CORS，其他人都指向
https://www.html5rocks.com/en/tutorials/cors/

但我找不到解决我的问题的答案。

c $ c> https://maps.googleapis.com/maps/api 不支持以您的代码尝试使用它的方式从Web应用中运行的前端JavaScript获取请求。

相反，您需要使用受支持的 Google映射JavaScript API ，客户端代码与您尝试的不同。距离矩阵服务的示例看起来更像这样：

< script>
var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix（{
originins：[origin1，origin2]，
destination：[destinationA，destinationB]，
travelMode：'DRIVING'，
unitSystem：google .maps.UnitSystem.METRIC，
avoidHighways：假，
avoidTolls：假
}，...
将/脚本>

将脚本异步推迟
SRC = https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap >
将/脚本>


以下是使用地方自动填充API的示例使用Places库：

 < $ c $< script> 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 center：{lat ：-33.8688，lng：151.2195}，
 zoom：13 
}）; 
 ... 
 map.cont ROLS [google.maps.ControlPosition.TOP_RIGHT] .push（卡）; 
 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> 
将脚本
 SRC = https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap 
异步延迟>< ; /脚本> 
  

使用Maps JavaScript API（通过脚本）元素加载库，然后使用 google.maps.Map 和其他 google.maps。* 方法 - 是从前端运行浏览器的JavaScript代码向Google Maps API发出请求的唯一支持方式。

Google故意不允许访问Google Maps API通过在其他类库中使用axios或AJAX方法发送的请求，也不直接使用XHR或Fetch API。

I've seen this question asked by multiple people, none of the answers have worked for me.

I'm trying to make an API call to the google maps api with react/axios.

This is my get request:

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

This is the error msg:

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.

I've read the article con CORS that everyone else points to https://www.html5rocks.com/en/tutorials/cors/

but I can't find an answer to my problem there.

解决方案

https://maps.googleapis.com/maps/api doesn’t support getting requests from frontend JavaScript running in web apps in the way your code is trying to use it.

Instead you need to use the supported Google Maps JavaScript API, the client-side code for which is different from what you’re trying. A sample for the Distance Matrix service looks more like this:

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

And here’s an example for using the Place Autocomplete 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>

Using the Maps JavaScript API like that—by way of a script element to load the library, and then using the google.maps.Map and other google.maps.* methods—is the only supported way to make requests to the Google Maps API from frontend JavaScript code running a browser.

Google intentionally doesn’t allow access to the Google Maps API by way of requests sent with axios or AJAX methods in other such libraries, nor directly with XHR or the Fetch API.

这篇关于Google Maps API：请求的资源上没有“Access-Control-Allow-Origin”标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！