как добавить пользовательский http заголовок в ajax запрос с помощью javascript — Q&A Хекслет
2026-02-26 18:54 Diff
https://ru.hexlet.io/qna/javascript/questions/kak-dobavit-polzovatelskiy-http-zagolovok-v-ajax-zapros-s-pomoschyu-javascript

Можно использовать объект XMLHttpRequest или Fetch API. XMLHttpRequest — это более старый способ выполнения AJAX-запросов, но он все еще широко используется:

// Создаем новый объект XMLHttpRequest const xhr = new XMLHttpRequest(); // Открываем соединение (метод, URL, асинхронность) xhr.open("GET", "https://api.example.com/data", true); // Устанавливаем пользовательский заголовок xhr.setRequestHeader("X-Custom-Header", "MyCustomValue"); // Устанавливаем обработчик события загрузки xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { // Обработка успешного ответа console.log("Response:", xhr.responseText); } else { // Обработка ошибки console.error("HTTP Error:", xhr.status); } }; // Устанавливаем обработчик события ошибки xhr.onerror = function() { console.error("Request failed"); }; // Отправляем запрос xhr.send();

Fetch API — это более новый и более удобный способ работы с HTTP-запросами в JavaScript. Вот как можно сделать то же самое с помощью Fetch API:

// Определяем параметры запроса fetch("https://api.example.com/data", { method: "GET", // Метод запроса headers: { "X-Custom-Header": "MyCustomValue", // Устанавливаем пользовательский заголовок // Можно добавить другие заголовки, если необходимо "Content-Type": "application/json" } }) .then(response => { // Проверяем успешность ответа if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); // Обработка ответа в формате JSON }) .then(data => { // Обработка данных console.log("Response:", data); }) .catch(error => { // Обработка ошибок console.error("Fetch error:", error); });