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

Пользователь

от laney_johnson , в категории: JavaScript , 9 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от miguel_ritchie , 9 месяцев назад

@laney_johnson 

Для прописывания заголовков CORS (Cross-Origin Resource Sharing) в запросах Axios на Vue.js необходимо использовать свойство headers объекта config.


Ниже приведен пример, как прописать заголовки CORS для Axios на Vue.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import axios from 'axios';

// Создание экземпляра объекта axios
const instance = axios.create({
    baseURL: 'https://api.example.com',
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        // Дополнительные заголовки, если необходимо
    },
});

// Выполнение GET-запроса с заголовками CORS
instance.get('/data')
    .then(response => {
        // Обработка успешного ответа
        console.log(response.data);
    })
    .catch(error => {
        // Обработка ошибки
        console.error(error);
    });


В этом примере заголовок Access-Control-Allow-Origin установлен в значение *, что означает, что сервер разрешает все источники (однако это может быть настроено по-другому на сервере). Вы можете добавить другие заголовки, если необходимо, используя такой же синтаксис в свойстве headers.


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