API mit Cookie abrufen

Ich probiere die neue Fetch-API aus, habe aber Probleme mit Cookies. Insbesondere nach einer erfolgreichen Anmeldung gibt es in zukünftigen Anforderungen einen Cookie-Header, aber Fetch scheint diese Header zu ignorieren, und alle meine mit Fetch gestellten Anforderungen sind nicht autorisiert.

Liegt es daran, dass Fetch noch nicht bereit ist oder Fetch nicht mit Cookies funktioniert?

Ich baue meine App mit Webpack. Ich verwende auch Fetch in React Native, das nicht das gleiche Problem hat.

Fetch verwendet standardmäßig kein Cookie. Gehen Sie folgendermaßen vor, um Cookies zu aktivieren:

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

Zusätzlich zur Antwort von @ Khanetor für diejenigen, die mit Cross-Origin-Anfragen arbeiten: credentials: 'include'

Beispiel für eine JSON-Abrufanforderung:

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

Habe gerade gelöst. Nur zwei f. Tage der Brutforce

Für mich lag das Geheimnis in Folgendem:

1. Ich habe POST / api / auth angerufen und festgestellt, dass Cookies erfolgreich empfangen wurden.

2. Rufen Sie dann GET / api / users / with auf credentials: 'include'und erhalten Sie 401 unauth, da mit der Anfrage keine Cookies gesendet wurden.

Der SCHLÜSSEL soll auch credentials: 'include'für den ersten /api/authAnruf eingestellt werden.

Wenn Sie dies im Jahr 2019 lesen, credentials: "same-origin"ist dies der Standardwert.

fetch(url).then

Fügen Sie hier einfach die richtigen Antworten für .net webapi2Benutzer hinzu.

Wenn Sie verwenden, corsweil Ihre Client-Site von einer anderen Adresse als Ihrer bereitgestellt wird, webapimüssen Sie auch SupportsCredentials=truedie serverseitige Konfiguration einbeziehen.

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

Das funktioniert bei mir:

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

Dann bauen Sie Ihren Anruf auf:

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