Ошибка CORS при обращении к API Локатора

Question

Пишу прогноз погоды на Vue 3. Идея в том, чтобы автоматически получать геолокацию пользователя, и передавать ее при обращении к Weather API. Для получения геолокации использую Яндекс Локатор.

Вот часть моего кода, получающая геолокацию:

<template>
  <div>
    <button @click="getLocation">Get Location</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods:{
    async getLocation() {
      const url = 'http://api.lbs.yandex.net/geolocation';

      const data = {
        common: {
          version: '1.0',
          api_key: '18ac320b-7c9e-4c44-b466-f6bdbbc56627',
        },
      };

      try {
        const response = await axios.post(url, JSON.stringify(data));
        console.log(response.data);
      } catch (error) {
        console.log(error);
      }
    }
  },
}
</script>

По советам пятилетней давности из интернета добавлял и убирал объект headers и передавал его третьим параметром в axios.post:

//выше объявление функции, url, объект data
const headers = {
  'Content-Type': 'application/json'
};

try {
  const response = await axios.post(url, JSON.stringify(data), { headers });
// дальше такой же код

В 100% случаев получаю две ошибки:

Access to XMLHttpRequest at 'http://api.lbs.yandex.net/geolocation' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST http://api.lbs.yandex.net/geolocation net::ERR_FAILED 400 (Bad request)

catch(error) выводит ошибку "Network Error".

Локальный сервер не использую. Просто в WebStorm нажал запустить проект. Он запустил его на localhost. (Мб сейчас неправильно выразился. В теме серверов, хостов и т.д. очень сильно плаваю)

Инфу брал с доков https://yandex.ru/dev/locator/doc/ru/api/json

Я в целом новичок, к API обращался только один раз. В GET/POST запросах пока что разбираюсь не очень. Так что мог напортачить где-то в элементарных местах. Тем более, что код писал не без помощи Chat GPT :)

Пожалуйста, помогите. Уже не первый час безуспешно гуглю.

Answer 1

Внутри vue.config.js файла добавьте следующие строки:

module.exports = {
  // options...
  devServer: {
        proxy: 'https://mywebsite/',
    }
}

А затем отправьте свои ajax-вызовы на http://localhost/api/.

Вы можете прочитать полную статью здесь: Как бороться с ошибкой CORS в Vue CLI 3?

БЛОГ НА HUSL

Ошибка CORS при обращении к API Локатора

Ответы (1 шт):