时间戳

首页 > 解决方案 > 从Vue js通过axios调用谷歌地图海拔api时如何修复跨域读取阻塞？

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

问题描述

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

我验证了邮递员中的 url 作品尝试使用 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) 阻止了跨域响应https://maps.googleapis.com/maps/api/elevation/json?locations=51.49602489999999,-0.17026260000000093&key=APIKEY与 MIME 类型 application/json

标签： javascriptgoogle-mapsvue.jscorsaxios

解决方案

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

推荐阅读