Obtener API con cookie

Estoy probando la nueva API Fetch pero tengo problemas con las cookies. Específicamente, después de un inicio de sesión exitoso, hay un encabezado de Cookie en futuras solicitudes, pero Fetch parece ignorar esos encabezados, y todas mis solicitudes realizadas con Fetch no están autorizadas.

¿Es porque Fetch todavía no está listo o Fetch no funciona con Cookies?

Construyo mi aplicación con Webpack. También uso Fetch en React Native, que no tiene el mismo problema.

Fetch no utiliza cookies por defecto. Para habilitar la cookie, haga esto:

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

Además de la respuesta de @ Khanetor, para aquellos que trabajan con solicitudes de origen cruzado: credentials: 'include'

Ejemplo de solicitud de búsqueda 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

Acabo de resolver. Solo dos f. días de brutforce

Para mí el secreto estaba en seguir:

1. Llamé a POST / api / auth y vi que las cookies se recibieron con éxito.

2. Luego llamé a GET / api / users / with credentials: 'include'y obtuve 401 unauth, debido a que no se enviaron cookies con la solicitud.

La CLAVE es establecer también credentials: 'include'la primera /api/authllamada.

Si está leyendo esto en 2019, credentials: "same-origin"es el valor predeterminado.

fetch(url).then

Simplemente agregue a las respuestas correctas aquí para los .net webapi2usuarios.

Si está utilizando corsporque su sitio de cliente se sirve desde una dirección diferente a la suya, webapientonces debe incluir también SupportsCredentials=trueen la configuración del lado del servidor.

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

Esto funciona para mi:

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

Luego construya su llamada:

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