Проблема с CORS.Google GET API GET запрос |vue.js

Question

Я сейчас работаю над проектом vue.js.Цель приложения - проверить расстояние между двумя локализациями, а затем показать маршрут на карте и рассчитать стоимость перевозки, основанную на расстоянии.

Я использую API-адреса google directions, axios для запроса на получение.

Проблема в том, что из-за CORS запрос get вызывает ошибку (я запускаю это приложение локально).Я уже пробовал плагин chrome CORS, но проблема все еще существует.

У вас есть какие-либо решения или просто идея, как решить эту проблему?

Спасибо взаранее.

PS Код ниже

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);
        });
    },
  },
};

Answer 1

Аналогично здесь

Если вы используете способ Javascript API,

1. Создайте учетную запись на платформе Google Maps
2. Откройте VueProject
3. Создание файла 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>

Ссылка на

Использование API Карт Google с Vue.js

API JavaScript Карт, Hello World

Answer 2

Я нашел решение.Может быть, это не самый лучший вариант, но он работает.

Я использовал прокси в любом месте cors.

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