猿问

当从Vue js通过axios调用Google Maps海拔API时,如何解决跨域读取阻止?

我正在尝试在Vue JS项目中使用Google Map API。我正在使用两个Google Maps服务:-第一个是时区API =>效果很好-第二个是Elevation 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);

     });

WORKS TIMEZONE 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


跃然一笑
浏览 326回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答