Javascript 谷歌地图API；“CORS标头”访问控制允许源“丢失”错误

我试图用谷歌地图API计算两个地方之间的预计旅行时间。我以以下方式要求提供数据：

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

问题是，在浏览器控制台中，我得到了错误：

TypeError: NetworkError when attempting to fetch resource

它也给了我一个警告：

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：

{
   "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"
}

---

有人能帮我解决这个问题吗？我曾在网站上尝试过类似的问题，但我无法解决这个问题。提前感谢。

您正在客户端使用距离矩阵服务。 但是clientbrowser站点不支持您尝试访问API的方式，并且它将无法可靠地工作

很好，您的用例有一个库： 这是客户端的指南。这里有一张支票

也许这段代码可以帮助您：

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

---

查看原因…CORS未启用。在服务器或第三方服务上使用代理。他们可能在试图阻止你们在浏览器中公开你们的api密钥，任何人都可以看到它。你们能再解释一下吗？搜索ajax代理并添加服务器运行的任何语言当我查看网络部分中的控制台时，它向我显示调用已成功完成。即使我在浏览器中访问url，它也会显示一个包含数据的json。它可能会意外工作，但我无法保证我的API_密钥在哪里？Raul Castro Rivero我更新了我的答案。查看vanilla js示例。您必须将其放入脚本标记中。