谷歌地图 API；“CORS 标头‘Access-Control-Allow-Origin’缺失"错误

2022-01-20 00:00:00 reactjs fetch javascript google-distancematrix-api

我正在尝试使用 Google Maps API 计算两个地方之间的预计旅行时间.我通过以下方式要求数据:

I'm trying to calculate the estimated travel time between two places, with the Google Maps API. I am asking for the data in the following way:

const Url = 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=25.7694708,-80.259947&destinations=25.768915,-80.254659&key=' + API_KEY;
try {
  const response = await fetch(Url);
  console.log(response);
  const data = await response.json();
  console.log(data.rows);
} catch(e){
  console.log(e);
}

问题是在浏览器控制台中出现错误:

The problem is that in the browser console I get the error:

TypeError: NetworkError when attempting to fetch resource

它还向我显示了一个警告:

and it also shows me a warning: 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/distancematrix/json?origins=25.7694708,-80.259947&destinations=25.768915,-80.254659&key=API_KEY. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

但是当我查看网络部分的控制台时，它显示调用已成功完成，并显示以下 json:

But when I look at the console in the network part it shows me that the call was completed successfully and it shows me the following json:

{
   "destination_addresses" : [ "3670 SW 3rd St, Miami, FL 33135, USA" ],
   "origin_addresses" : [ "3911 SW 2nd Terrace, Coral Gables, FL 33134, USA" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "0.9 km",
                  "value" : 881
               },
               "duration" : {
                  "text" : "2 mins",
                  "value" : 144
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

有人可以帮我解决这个问题吗?我在网站上尝试过类似的问题，但我无法解决问题.提前致谢.

Can someone help me solve this problem? I have tried similar questions on the site but I have not been able to solve the problem. Thanks in advance.

推荐答案

您正在客户端使用距离矩阵服务.但是客户端(浏览器)站点不支持您尝试访问 API 的方式，并且它不会可靠地工作.

You are using Distance Matrix Service on client side. But the manner you trying to access the API is not supported for client(browser)-site and it will not work reliably.

很高兴有一个适用于您的用例的库:这是客户端距离矩阵服务的指南.这是一个 vanilla-js 示例 看看.

Good that there is a library for your use-case: Here's the guide for the Distance Matrix Service on client side. And here's a vanilla-js example Check it out.

也许这个片段会对你有所帮助:

Maybe this snippet will help you:

const matrix = new google.maps.DistanceMatrixService();

matrix.getDistanceMatrix({
  origins: [new google.maps.LatLng(25.7694708, -80.259947)],
  destinations: [new google.maps.LatLng(25.768915, -80.254659)],
  travelMode: google.maps.TravelMode.DRIVING,
}, function(response, status) {
  //do something
});

相关文章