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

Question

我正在尝试使用 Google Maps API 计算两个地点之间的预计旅行时间。我通过以下方式索取数据：

\n\n

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

\n\n

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

\n\n

TypeError: NetworkError when attempting to fetch resource\n

\n\n

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

\n\n

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 \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 missing).\n

\n\n

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

\n\n

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

\n\n

有人可以帮我解决这个问题吗？我在网站上尝试过类似的问题，但未能解决问题。提前致谢。

\n

Answer 1

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

很高兴有一个适合您的用例的库：这是客户端距离矩阵服务 的指南。这是一个vanilla-js 示例，请查看。

也许这个片段会对您有所帮助：

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