Javascript 如何修复axios从Vue js调用google maps elevation api时的跨原点读取阻塞？

我试图在VUEJS项目中使用GoogleMapAPI。 我正在使用两个谷歌地图服务： -第一个是时区API=>工作正常 -第二个是Elevation API=>获取跨原点读取块

我在postman中验证了url是否有效 尝试使用Ajax和vue资源

提升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时区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);
     });

结果是：

-CORS策略已阻止从源“”访问“”处的XMLHttpRequest:请求的资源上不存在“访问控制允许源”标头

以及警告：

---

跨源读取阻塞（CORB）使用MIME类型application/json阻塞跨源响应此API不用于脚本的客户端消费。您必须使用。

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