API ophalen met cookie

Ik probeer de nieuwe Fetch API uit, maar heb problemen met cookies. In het bijzonder is er na een succesvolle aanmelding een Cookie-header in toekomstige verzoeken, maar Fetch lijkt die headers te negeren, en al mijn verzoeken die met Fetch worden gedaan, zijn ongeautoriseerd.

Is het omdat Fetch nog steeds niet gereed is of Fetch niet werkt met cookies?

Ik bouw mijn app met Webpack. Ik gebruik ook Fetch in React Native, wat niet hetzelfde probleem heeft.

Antwoord 1, autoriteit 100%

Fetch gebruikt standaard geen cookies. doe dit:

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

Antwoord 2, autoriteit 71%

In aanvulling op het antwoord van @Khanetor, voor degenen die werken met cross-origin-verzoeken: credentials: 'include'

Voorbeeld van JSON-ophaalverzoek:

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/Verzoek/referenties

Antwoord 3, autoriteit 21%

Zojuist opgelost. Slechts twee f. dagen brutforce

Voor mij zat het geheim in het volgende:

1. Ik heb POST /api/auth gebeld en zie dat cookies zijn ontvangen.

2. Vervolgens GET /api/users/ aanroepend met credentials: 'include'en kreeg 401 unauth, omdat er geen cookies werden verzonden met het verzoek.

De SLEUTEL is om credentials: 'include'ook in te stellen voor de eerste /api/auth-aanroep.

Antwoord 4, autoriteit 8%

Als je dit in 2019 leest, is credentials: "same-origin"de standaardwaarde.

fetch(url).then

Antwoord 5

Gewoon toevoegen aan de juiste antwoorden hier voor gebruikers van .netwebapi2.

Als u corsgebruikt omdat uw klantsite wordt bediend vanaf een ander adres dan uw webapi, moet u ook SupportsCredentials=trueaan de server-side configuratie.

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

Antwoord 6

Het programmatisch overschrijven van de Cookie-header aan de browserzijde werkt niet.

In fetchdocumentatie, Merk op dat sommige namen verboden zijn.wordt vermeld. En Cookieis toevallig een van de verboden kopnamen, die niet programmatisch kunnen worden gewijzigd. Neem bijvoorbeeld de volgende code:

• Uitgevoerd in de Chrome DevTools-console van pagina https://httpbin.org/, Cookie: 'xxx=yyy'wordt genegeerd en de browser stuurt altijd de waarde van document.cookieals de cookie, als die er is.
• Indien uitgevoerd op een andere oorsprong, wordt er geen cookie verzonden.

fetch('https://httpbin.org/cookies', {
  headers: {
    Cookie: 'xxx=yyy'
  }
}).then(response => response.json())
.then(data => console.log(JSON.stringify(data, null, 2)));

P.S. U kunt een voorbeeldcookie foo=barmaken door https:// te openen httpbin.org/cookies/set/foo/barin de Chrome-browser.

Zie Verboden koptekstnaamvoor details.

Antwoord 7

Mijn probleem was dat mijn cookie was ingesteld op een specifiek URL-pad (bijv. /auth), maar ik was aan het fetchnaar een ander pad. Ik moest het pathvan mijn cookie instellen op /.

Antwoord 8

Als het nog steeds niet werkt na het herstellen van de inloggegevens.

Ik gebruikte ook de :

 credentials: "same-origin"

en het werkte vroeger, maar ineens niet meer, na veel graven realiseerde ik me dat ik de url van mijn website had veranderd in http://192.168.1.100om het in LAN te testen, en dat was de url die werd gebruikt om het verzoek te verzenden, ook al was ik op http://localhost:3000.

Dus tot slot, zorg ervoor dat het domein van de pagina overeenkomt met het domein van de ophaal-URL.

Antwoord 9

Dit werkt voor mij:

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

Bouw vervolgens uw gesprek op:

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