Блокировка перекрестного чтения (CORB) при получении данных из API направлений с помощью axios с Nuxt js

Question

В моем проекте Nuxt я использую библиотеку vue2-google-maps для создания карты и аксиумы для получения данных из Map API. Я хочу получить расстояние между двумя точками на карте Google, поэтому я использую API направлений: https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY. Когда я использую его с бессонницей, я обычно получаю данные, как на картинке ниже:

Но когда я использую его с nuxt, используя axios, я получаю ошибку вроде:

В запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Origin 'http://localhost:3000' поэтому не разрешен доступ.

Блокировка перекрестного чтения (CORB) заблокировала ответ перекрестного происхождения https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY с приложением MIME-типа / json. Подробнее см. https://www.chromestatus.com/feature/5629709824032768.

Но если я использую API геокодирования с nuxt, он работает нормально Я попытался добавить заголовок Access-Control-Allow-Origin = *, но все равно получаю ошибки. Я не знаю, почему я получаю эти ошибки. Мой код:

axios
  .get('https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY')
  .then(res => {
      console.log("Res: ");
      console.log(res)
   })
   .catch(err => console.log(err));

Пожалуйста, помогите мне. Спасибо !!!

Answer 1

В nuxt.config.js необходимо ввести учетные данные: false, чтобы разрешить подстановочный знак CORS.

Изменить настройки следующим образом.

axios: {
   baseURL: 'https://maps.googleapis.com/maps/api',
   proxyHeaders: false,
   credentials: false
}

Заголовок CORS отсутствует в ответе от Google Maps, поскольку он предназначен для использования на серверных приложениях. Для клиентской части (браузера) вам необходимо использовать Официальную библиотеку карт . (Показано на изображении выше).

Ссылка: https://github.com/nuxt-community/axios-module#credentials