从Vue js通过axios调用谷歌地图海拔api时如何修复跨域读取阻塞？

Posted 2023-02-22

【中文标题】从Vue js通过axios调用谷歌地图海拔api时如何修复跨域读取阻塞？

【英文标题】：How to fix Cross-Origin Read Blocking when calling google maps elevation api by axios from Vue js?

【发布时间】：2019-09-15 18:26:46

【问题描述】：

我正在尝试在 vue js 项目中使用 google map api。 我正在使用两个谷歌地图服务： - 第一个是时区 API => 工作正常 - 第二个是 Elevation API => 获得跨域读取阻塞

我验证了该网址在邮递员中有效 尝试使用 Ajax 和 vue-resource

海拔 API 不起作用

axios
    .get(
`https://maps.googleapis.com/maps/api/elevation/json?locations=$latitude,$longitude&key=APIKEY`)
    .then(response => 
        console.log(response);
        return response.result.elevation;
     )
     .catch(error => 
        console.log(error);
     );

工作时区 API

axios
    .get(
`https://maps.googleapis.com/maps/api/timezone/json?location=$place.latitude,$place.longitude&timestamp=$moment().unix()&key=APIKEY`)
    .then(response => 
        console.log(response);
        return response.result.elevation;
     )
     .catch(error => 
        console.log(error);
     );

结果是：

-从源“https://test.test”访问“https://maps.googleapis.com/maps/api/elevation/json?locations=51.49602489999999,-0.17026260000000093&key=APIKEY”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

还有一个警告：

跨域读取阻塞 (CORB) 阻止了 MIME 类型为 application/json 的跨域响应 https://maps.googleapis.com/maps/api/elevation/json?locations=51.49602489999999,-0.17026260000000093&key=APIKEY

【参考方案1】：

此 API 不适用于脚本的客户端使用。您必须使用Maps javascript API Elevation Service。

【讨论】：

我决定在服务器端进行 API 调用并在客户端使用它，这样更好，因为我可以限制对 api 的调用（支付更少的费用），一旦我得到结果我在数据库中更新它