搜索

首页  >  问答  >  正文

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粉993712159460 天前447

全部回复(1)我来回复

  • P粉384244473

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

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

    相反，您必须使用支持的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-通过使用