Google Maps API:请求的资源上不存在“Access-Control-Allow-Origin"标头 [英] Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述

我看到很多人问过这个问题，但没有一个对我有用.

我正在尝试使用 react/axios 对 google maps api 进行 API 调用.

这是我的获取请求:

componentDidMount() {轴({方法:'获取'，网址:`http://maps.googleapis.com/maps/api/js?key=${key}/`，标题:{访问控制允许来源":'*'"Access-Control-Allow-Methods": 'GET',},}).then(功能(响应){控制台日志(响应)；}).catch(函数(错误){控制台日志(错误)；});}

这是错误消息:

XMLHttpRequest 无法加载 http://maps.googleapis.com/maps/api/js?键=xxxxxxxxx/.对预检请求的响应未通过访问控制检查: 'Access-Control-Allow-Origin' 标头不存在于请求的资源.因此，不允许访问 Origin 'http://localhost:3000'.

我已经阅读了其他人都指向的文章 con CORShttps://www.html5rocks.com/en/tutorials/cors/>

但我在那里找不到问题的答案.

解决方案

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

相反，您必须使用受支持的 Google Maps JavaScript API，即客户端-side 代码与您正在尝试的不同.距离矩阵服务示例看起来更像:

<脚本异步延迟src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

这里是使用 Place Autocomplete API 的示例 使用 Places图书馆:

<脚本src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"异步延迟></script>

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

Google 故意不允许通过使用 axios 或其他此类库中的 AJAX 方法发送的请求访问 Google Maps API，也不允许直接使用 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 must 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:

<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, 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屋！