Scarica API con cookie

Sto provando la nuova API Fetch ma sto riscontrando problemi con i cookie. In particolare, dopo un accesso riuscito, c'è un'intestazione Cookie nelle richieste future, ma Fetch sembra ignorare quelle intestazioni e tutte le mie richieste fatte con Fetch non sono autorizzate.

È perché Fetch non è ancora pronto o Fetch non funziona con i cookie?

Costruisco la mia app con Webpack. Uso anche Fetch in React Native, che non presenta lo stesso problema.

Fetch non utilizza i cookie per impostazione predefinita. Per abilitare i cookie, procedere come segue:

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

Oltre alla risposta di @ Khanetor, per coloro che stanno lavorando con richieste di origine incrociata: credentials: 'include'

Richiesta di recupero JSON di esempio:

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

Ho appena risolto. Solo due f. giorni di brutalità

Per me il segreto era nel seguente:

1. Ho chiamato POST / api / auth e ho visto che i cookie sono stati ricevuti con successo.

2. Quindi chiamando GET / api / users / with credentials: 'include'e ottenuto 401 unauth, a causa della mancanza di cookie con la richiesta.

Il TASTO deve essere impostato anche credentials: 'include'per la prima /api/authchiamata.

Se stai leggendo questo nel 2019, credentials: "same-origin"è il valore predefinito.

fetch(url).then

Basta aggiungere alle risposte corrette qui per gli .net webapi2utenti.

Se si utilizza corsperché il sito client è servito da un indirizzo diverso dal proprio, webapiè necessario includere anche SupportsCredentials=truenella configurazione lato server.

        // 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);

Questo funziona per me:

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;
}

Quindi crea la tua chiamata:

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)));
    };
  }