谷歌距离矩阵API返回CORS封锁

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

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

错误

我试图用谷歌搜索这个问题，但我找不到任何有用的东西。

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

Answer 1

您的错误表明您正在通过 Web 服务请求调用距离矩阵 API。这个看起来像这样的 Web 服务请求：(https://maps.googleapis.com/maps/api/distancematrix/json？ . . . .(应该在服务器端使用，但是您在客户端使用它，这就是您运行 CORS 错误的原因。您可以使用 Maps JavaScript API 的距离矩阵服务来客户端使用距离矩阵，而不是使用此 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);
}
}
}
}); 

希望这有帮助！