JavaScript XMLHttpRequest.withCredentials — куки в CORS-запиті

Властивість withCredentials каже надсилати куки й дані авторизації в запиті на інший домен.

правити

Загальний опис

За замовчуванням крос-доменний запит іде без кук — і це часта причина того, що API відповідає «не авторизовано», хоч у браузері ти залогінений.

Але однієї цієї властивості замало. Сервер має відповісти двома заголовками: Access-Control-Allow-Credentials: true і — обов'язково — Access-Control-Allow-Origin із конкретним доменом. Зірочка * разом із куками заборонена, і браузер відкине відповідь.

На запити в межах свого домену вона не впливає — там куки йдуть завжди.

правити

Нотатка

Access-Control-Allow-Origin: * несумісний із куками. Сервер мусить назвати конкретний домен, інакше браузер відкине відповідь — навіть якщо сервер її надіслав.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	3	3.5	4	12	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

const xhr = new XMLHttpRequest();

// На бойовій сторінці тут була б адреса чужого API; у прикладі відповідь
// лежить просто в адресі даних, тому запит нікуди не йде
xhr.open('GET', 'data:application/json,{"login":"taras"}');

// без цього куки НЕ підуть
xhr.withCredentials = true;

xhr.onload = () => console.log(xhr.response);
xhr.send();

// сервер має відповісти:
//   Access-Control-Allow-Credentials: true
//   Access-Control-Allow-Origin: https://css.in.ua  ← не «*»

// у fetch це:
// fetch(url, { credentials: 'include' });