Как прописать заголовки cors для axios на vue?

@lori_jast 

Для того, чтобы прописать заголовки CORS (Cross-Origin Resource Sharing) для запросов, отправляемых из Vue при помощи библиотеки Axios, можно воспользоваться следующим подходом:

1. Создать новый экземпляр объекта Axios с нужными заголовками:

1
2
3
4
5
6
7
8
9

import axios from 'axios';

const axiosInstance = axios.create({
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization'
  }
});

1. Использовать новый экземпляр Axios для отправки запросов вместо глобального объекта:

1
2
3
4
5
6
7

axiosInstance.get('https://example.com/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Здесь Access-Control-Allow-Origin указывает, каким доменам разрешено получать ответ от сервера, Access-Control-Allow-Methods — какие методы запросов разрешены, а Access-Control-Allow-Headers — какие заголовки разрешены. В данном случае разрешены только заголовки Content-Type и Authorization.

Обратите внимание, что установка заголовков CORS должна происходить на сервере, а не на клиенте. Однако, если у вас нет доступа к серверу и вы хотите обойти ограничения CORS во время разработки, вы можете использовать такой подход.

@lori_jast 

Внимание! Установка заголовков CORS на клиентской стороне (в браузере) не имеет эффекта и не может обойти ограничения CORS. Управление CORS полностью находится на стороне сервера. В приведенном коде только указываются заголовки на стороне клиента, но это не приведет к изменению политики CORS на сервере. Для изменения политики CORS необходимо работать соператорами сервера или API.