CORS 的问题。 Google 路线 API GET 请求

【问题标题】：Problem with CORS. Google directions API GET request | vue.jsCORS 的问题。 Google 路线 API GET 请求 | Vue.js
【发布时间】：2019-01-28 23:53:54
【问题描述】：

我目前从事 vue.js 项目。该应用程序的目标是检查 2 个位置之间的距离，然后在地图上显示路线并根据距离计算运输成本。

我使用谷歌方向api，axios获取请求。

问题是，由于 CORS，get 请求给了我一个错误（我在本地运行这个应用程序）。我已经尝试过 chrome CORS 插件，但问题仍然存在。

您有任何解决方案或只是想知道如何解决这个问题？

提前谢谢你。

附：下面的代码

import axios from 'axios';

const directionsApi = 'https://maps.googleapis.com/maps/api/directions/json?';
const apiKey = '&key=trust_me_the_key_is_valid';

export default {
  name: 'FirstForm',
  data() {
    return {
      fromValue: '',
      toValue: '',
      distance: '',
    };
  },
  methods: {
    handleFromToInput: function () {
      const fromTo = `origin=${this.fromValue}&destination=${this.toValue}`;
      axios.get(`${directionsApi}${fromTo}${apiKey}`)
        .then((response) => {
          // this.distance = response.routes[0].legs[0].distance.text;
          console.log(response.routes[0].legs[0].distance.text);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};

【问题讨论】：

看起来您必须使用 Google Maps JavaScript SDK 而不是执行普通的 HTTP 请求：github.com/googlemaps/google-maps-services-js/issues/… 这对您有帮助吗？
谷歌地图 JavaScript SDK？你什么意思？仅使用普通的javascript api，我怎么能得到两点之间的距离？我已切换到距离矩阵 api，“邮递员”为我提供了包含我需要的全部数据的漂亮 json。 Vue应用程序中仍然存在问题。
为什么不使用VueGoogleMaps 包？

标签： google-maps-api-3 vuejs2 map-directions

【解决方案1】：

Similar here

如果你使用Javascript API的方式来做，

在 Google Maps Platform 上创建一个帐户
打开 Vue 项目
制作一个js文件（src/utils/gmap.js）

// src/utils/gmaps.js
const API_KEY = 'XXXXXYOURAPIKEYXXXX';
const CALLBACK_NAME = 'gmapsCallback';

let initialized = !!window.google;
let resolveInitPromise;
let rejectInitPromise;
const initPromise = new Promise((resolve, reject) => {
  resolveInitPromise = resolve;
  rejectInitPromise = reject;
});

export default function init() {
  if (initialized) return initPromise;

  initialized = true;
  window[CALLBACK_NAME] = () => resolveInitPromise(window.google);

  const script = document.createElement('script');
  script.async = true;
  script.defer = true;
  script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=${CALLBACK_NAME}`;
  script.onerror = rejectInitPromise;
  document.querySelector('head').appendChild(script);

  return initPromise;
}

在视图js (src/views/MyMap.vue)

<template>
  <div class="my-map">
      My Map
      <div id="map"></div>
  </div>
</template>

<script>
import gmapsInit from '@/utils/gmaps';
export default {
  name: 'myMap',
  components: {
  },
  data () {
    return {
    }
  },
  computed: {
  },
  async mounted() {
    try {
      const google = await gmapsInit();
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });

    } catch (error) {
      console.error(error);
    }
  },
  methods:{
  }

}
</script>

<style>
#map{
    width:400px;
    height:400px;
}
</style>

参考

Using the Google Maps API with Vue.js

Maps JavaScript API, Hello World

【讨论】：

【解决方案2】：

我找到了解决方案。也许它不是最好的，但它确实有效。

我使用过 cors-anywhere 代理。

https://cors-anywhere.herokuapp.com/${directionsApi}${fromTo}${apiKey}

【讨论】：