Récupérer l'API avec cookie

J'essaie la nouvelle API Fetch mais j'ai des problèmes avec les cookies. Plus précisément, après une connexion réussie, il y a un en-tête Cookie dans les demandes futures, mais Fetch semble ignorer ces en-têtes, et toutes mes demandes effectuées avec Fetch ne sont pas autorisées.

Est-ce parce que Fetch n'est toujours pas prêt ou Fetch ne fonctionne pas avec les cookies?

Je construis mon application avec Webpack. J'utilise également Fetch dans React Native, qui n'a pas le même problème.

Fetch n'utilise pas de cookie par défaut. Pour activer les cookies, procédez comme suit:

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

En plus de la réponse de @ Khanetor, pour ceux qui travaillent avec des demandes d'origine croisée: credentials: 'include'

Exemple de demande de récupération 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

Je viens de résoudre. Juste deux f. jours de brutforce

Pour moi, le secret était de suivre:

1. J'ai appelé POST / api / auth et j'ai vu que les cookies ont été reçus avec succès.

2. Ensuite, appelez GET / api / users / with credentials: 'include'et obtenu 401 unauth, car aucun cookie n'a été envoyé avec la demande.

La CLE est également à définir credentials: 'include'pour le premier /api/authappel.

Si vous lisez ceci en 2019, credentials: "same-origin"est la valeur par défaut.

fetch(url).then

Il suffit d'ajouter les bonnes réponses ici pour les .net webapi2utilisateurs.

Si vous utilisez corsparce que votre site client est servi à partir d'une adresse différente de la vôtre, webapivous devez également inclure SupportsCredentials=truela configuration côté serveur.

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

Cela fonctionne pour moi:

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

Ensuite, construisez votre appel:

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