Provare a ricevere un cookie utilizzando react and fetch

Question

Ho cercato di implementare alcuni componenti di autenticazione nella mia app per alcune ore e continuo a non capire alcune delle cose che stanno accadendo.

In sostanza, vorrei inviare un POST request contenente alcune credentials alla mia API, che mi manda un cookie indietro con un token se le credenziali lavorato. Quindi, il cookie dovrebbe essere incluso nelle intestazioni di tutte le future richieste alla mia API (che credevo fosse automatico).

server.js (il mio API è un mockup per ora, con i file JSON)

... 
app.post('/api/login', jsonParser, (req, res) => { 
    fs.readFile(ACCOUNTS_FILE, (err, data) => { 
    if (err) { 
     console.error(err); 
     process.exit(1); 
    } 

    const accounts = JSON.parse(data); 
    const credentials = { 
     email: req.body.email, 
     password: req.body.password, 
    }; 
    var token = null; 

    for (var i = 0; i < accounts.length; ++i) { 
     const account = accounts[i]; 

     if (account.email === credentials.email 
     && account.password === credentials.password) { 
     token = account.token; 
     break; 
     } 
    } 

    if (token) { 
     res.setHeader('Set-Cookie', `access_token=${token}; Secure; HttpOnly;`); 
     res.json({ token }); 
    } else { 
     res.json({ token: null }); 
    } 
    }); 
}); 
... 

app.js

... 
handleConnection(e) { 
    e.preventDefault(); 

    const email = this.state.email.trim(); 
    const password = this.state.password.trim(); 
    if (!email && !password) { 
     return (false); 
    } 

    fetch(loginUrl, { 
     method: 'POST', 
     headers: { 
     Accept: 'application/json', 
     'Content-Type': 'application/json', 
     credentials: 'include', 
     }, 
     body: JSON.stringify(this.state), 
    }) 
    .then((response) => response.json()) 
    .then((data) => { 
     console.log(data); 
    }) 
    .catch((error) => { 
     console.warn(error); 
    }); 

    return (true); 
    } 
... 

Ora il console.log(data) visualizza sempre il mio gettone (o null se le mie credenziali sono errate), ma la cosa cookie non funziona ...

Vedere, ricevo l'intestazione Set-Cookie, ma non ho ancora alcun cookie sulla mia pagina.

E anche se sono riuscito ad ottenere il cookie, quando cerco di creare un cookie utilizzando document.cookie = "access_token=123"; e quindi inviare la richiesta di nuovo, il mio biscotto non va nel mio header come farebbe con un jQuery Ajaxcall:

Ho letto here che l'aggiunta di credentials: 'include' avrebbe salvato la giornata, ma sfortunatamente no.

Cosa mi manca qui?

Grazie in anticipo!

Answer 1

Ho avuto lo stesso problema e ho trovato la risposta nel commento di Peter Bengtsson qui: https://davidwalsh.name/fetch

Se ho capito, nel tuo caso l'operazione di recupero dovrebbe essere:

fetch(loginUrl, { 
    credentials: 'same-origin', 
    method: 'POST', 
    headers: { 
    Accept: 'application/json', 
    'Content-Type': 'application/json' 
    }, 
    body: JSON.stringify(this.state), 
})