XMLHttpRequest withCredentials

AJAX

🎓 XMLHttpRequest

---

• Последовательность действий
• Экземпляр XMLHttpRequest
• Метод open()
• Метод send()
• Свойство readyState
• Свойство status
• Свойство responseText
• Обработка событий
• Метод setRequestHeader
• Метод getAllResponseHeaders()
• Свойство responseType

---

withCredentials

boolean

⚠️ Используется при кросс-доменных запросах

Значение true означает:

• разрешение на отправку аутентификационных данных клиента вместе с запросом ( содержимого cookie, например )
• разрешение third-party cookies ( сохранение на клиенте cookie домена, с которого пришел ответ на наш запрос )

Посмотрим на примере

☕

Перейдем на ptsv2.com

Откроем инструменты разработчика => вкладку Application

в панели навигации ( слева ) откроем раздел Cookies

Вручную вставим в куки любые данные

Cookies

Теперь у нас есть куки с домена ptsv2.com

Отправим из консоли запрос на сервер с опцией withCredentials

var obj = {
    provider: "Google",
    type: "service",
    eco: "git"
}

var request = new XMLHttpRequest
request.open (
    "POST",
    'http://ptsv2.com/t/mbkkong/post'
)

request.withCredentials = true
request.setRequestHeader (
    "Content-Type",
    "application/json"
)

request.onload = function() {
   if ( this.status === 200 ) {
        console.log ( this.response )
   }
}
request.send ( JSON.stringify ( obj ) )

Заголовки дампа на сервере ptsv2.com

Как видите, вместе с данными на сервер были отправлены куки

Сервер эти куки получил

Если открыть вкладку Network инструментов разработчика, то мы увидим, что кроме Headers, Preview, Response и Timing для нашего запроса появилась вкладка Cookies

В этой вкладке мы видим и те куки, которые "поехали" с запросом на сервер, и те куки, которые пришли назад

( ничего не пришло, потому что ptsv2.com не пишет куки, и ему наплевать на наше разрешение писать свои куки на клиенте )

---