Question

我已经创建了一个小的ReactJS前端应用程序，用于创建起点和终点的表格，计算起点和终点之间的距离，并将这些距离输出到表格中。

一切正常，除了每次尝试生成表时都会遭到Cors政策封锁。这是我为Google Distance Matrix API所做的功能：

export const getKm = (origins, destinations) => {

  var distance = require('google-distance-matrix');

  distance.key('HERE_IS_MY_API_KEY');
  distance.units('metric');

  distance.matrix(origins, destinations, function (err, distances) {
          if (distances.rows[0].elements.status == 'OK') {
            console.log(distances)
            return distances.rows.elements.distance.value;
        } else {
            console.log(err);
        }
      })
    }

这些是我从控制台收到的错误：

errors

我尝试过搜索该问题，但找不到任何有用的东西。

你们也许知道我必须朝哪个方向寻找答案？

Answer 1

您的错误表明您正在通过Web服务请求调用Distance Matrix API。此Web服务请求应如下所示：（https://maps.googleapis.com/maps/api/distancematrix/json？。。。）但是您在客户端使用它，这就是为什么您遇到CORS错误的原因。您可以使用Maps JavaScript API's Distance Matrix Service代替客户端使用此距离矩阵，而不使用此Web服务请求。

以下是我如何在我的reactjs代码中使用距离矩阵服务的摘要：

    var orig = this.state.input;
    var dest = this.state.destination;

    service.getDistanceMatrix({
          origins: [orig],
          destinations: [dest],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, (response, status) => {
          if (status !== 'OK') { 
            alert('Error was: ' + status);
          } else {
            var origins = response.originAddresses;
            var destinations = response.destinationAddresses;

            //Loop through the elements row to get the value of duration and distance
            for (var i = 0; i < origins.length; i++) {
              var results = response.rows[i].elements;
              for (var j = 0; j < results.length; j++) {
              var element = results[j];
              var distanceString = element.distance.text;
              var durationString = element.duration.text;


              this.setState ({
                distance: parseInt(distanceString, 10)
                });
              console.log(this.state.distance);
              this.setState ({
                duration: parseInt(durationString, 10)
                });
                console.log(this.state.duration);
               }
             }
          }
          });

希望这会有所帮助！

Google Distance Matrix API返回了CORS封锁

1 个答案: