Завантажити API з файлом cookie

Я випробовую новий API Fetch, але у мене виникають проблеми з файлами cookie. Зокрема, після успішного входу є заголовок Cookie у майбутніх запитах, але Fetch, здається, ігнорує ці заголовки, і всі мої запити, зроблені за допомогою Fetch, несанкціоновані.

Це тому, що Fetch все ще не готовий або Fetch не працює з cookies?

Я будую свій додаток за допомогою Webpack. Я також використовую Fetch in React Native, у якого немає тієї самої проблеми.

Fetch не використовує файли cookie за замовчуванням. Щоб увімкнути файл cookie, зробіть це:

fetch(url, {
  credentials: "same-origin"
}).then(...).catch(...);

Окрім відповіді @ Ханетора, для тих, хто працює з запитами на поперечне походження: credentials: 'include'

Зразок запиту на отримання JSON:

fetch(url, {
  method: 'GET',
  credentials: 'include'
})
  .then((response) => response.json())
  .then((json) => {
    console.log('Gotcha');
  }).catch((err) => {
    console.log(err);
});

https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

Щойно вирішили. Всього дві f. дні брутфорсу

Для мене секрет полягав у наступному:

1. Я зателефонував POST / api / auth і побачив, що файли cookie було успішно отримано.

2. Потім зателефонувавши GET / api / users / з credentials: 'include'і отримав 401 невідповідно, оскільки жодного файлу cookie не було надіслано із запитом.

KEY - це також встановити credentials: 'include'перший /api/authдзвінок.

Якщо ви читаєте це в 2019 році, credentials: "same-origin"це значення за замовчуванням.

fetch(url).then

Просто додайте сюди правильні відповіді для .net webapi2користувачів.

Якщо ви користуєтесь corsтим, що сайт вашого клієнта обслуговується з іншої адреси, ніж ваша, webapiто вам також потрібно включити його SupportsCredentials=trueв налаштування на стороні сервера.

        // Access-Control-Allow-Origin
        // https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
        var cors = new EnableCorsAttribute(Settings.CORSSites,"*", "*");
        cors.SupportsCredentials = true;
        config.EnableCors(cors);

Це працює для мене:

import Cookies from 'universal-cookie';
const cookies = new Cookies();

function headers(set_cookie=false) {
  let headers = {
    'Accept':       'application/json',
    'Content-Type': 'application/json',
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
};
if (set_cookie) {
    headers['Authorization'] = "Bearer " + cookies.get('remember_user_token');
}
return headers;
}

Потім побудуйте свій дзвінок:

export function fetchTests(user_id) {
  return function (dispatch) {
   let data = {
    method:      'POST',
    credentials: 'same-origin',
    mode:        'same-origin',
    body:        JSON.stringify({
                     user_id: user_id
                }),
    headers:     headers(true)
   };
   return fetch('/api/v1/tests/listing/', data)
      .then(response => response.json())
      .then(json => dispatch(receiveTests(json)));
    };
  }