Google Maps API； "CORS标头"Access-Control-Allow-Origin"丢失"错误 [英] Google Maps API; "CORS header ‘Access-Control-Allow-Origin’ missing" error

问题描述

我正在尝试使用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.

很好，您的用例有一个库: 这是客户端上 Distance Matrix服务的指南.这是一个 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
});

这篇关于Google Maps API； "CORS标头"Access-Control-Allow-Origin"丢失"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！