javascript - Få Axios att skicka cookies automatiskt i sina förfrågningar

Jag skickar förfrågningar från klienten till min Express.js-server med Axios.

Jag satte en cookie på klienten och jag vill läsa den cookien från alla Axios-förfrågningar utan att manuellt lägga till dem i förfrågningen.

Detta är mitt exempel på en klientsideförfrågan:

axios.get(`some api url`).then(response => ...

Jag försökte komma åt headers eller cookies genom att använda dessa egenskaper i min Express.js-server:

req.headers
req.cookies

Ingen av dem innehöll några cookies. Jag använder cookie parser-mellanprogram:

app.use(cookieParser())

Hur får jag Axios att skicka cookies automatiskt i förfrågningar?

Redigera :

Jag ställer in en kaka på klienten så här:

import cookieClient from 'react-cookie'

...
let cookie = cookieClient.load('cookie-name')
if(cookie === undefined){
      axios.get('path/to/my/cookie/api').then(response => {
        if(response.status == 200){
          cookieClient.save('cookie-name', response.data, {path:'/'})
        }
      })
    }
...

Även om det också använder Axios, är det inte relevant för frågan. Jag vill helt enkelt bädda in cookies i alla mina förfrågningar när en cookie har ställts in.

Svar #1

Du kan använda withCredentials-egenskapen.

XMLHttpRequest från en annan domän kan inte sätta cookie-värden för sin egen domän om inte withCredentials är inställt på true innan begäran görs.

axios.get(BASE_URL + '/todos', { withCredentials: true });

Det är också möjligt att tvinga autentiseringsuppgifter till varje Axios-förfrågan

axios.defaults.withCredentials = true

Eller använda inloggningsuppgifter för några av Axios-förfrågningarna som följande kod

const instance = axios.create({
   withCredentials: true,
   baseURL: BASE_URL
})
instance.get('/todos')

Svar #2

Sammanfattning:

{ withCredentials: true } eller axios.defaults.withCredentials=true

Från axios-dokumentationen

withCredentials: false, // default

withCredentials anger om cross-site Access-Control-förfrågningar ska göras med referenser eller inte

Om du skickar { withCredentials: true } med din förfrågan bör det fungera.

Ett bättre sätt skulle vara att sätta withCredentials som true i axios.defaults

axios.defaults.withCredentials = true

Svar #3

Så jag hade exakt samma problem och förlorade ungefär 6 timmar av mitt liv på att söka, jag hade

withCredentials: true

Men webbläsaren sparade ändå inte cookien förrän jag av någon konstig anledning fick idén att ändra konfigurationsinställningen:

Axios.post(GlobalVariables.API_URL + 'api/login', {
    email,
    password,
    honeyPot
}, {
    withCredentials: true,
    headers: {
        'Access-Control-Allow-Origin': '*', 
        'Content-Type': 'application/json'
    }
});

Det verkar som att du alltid bör skicka nyckeln 'withCredentials' först.

Svar #4

Det är också viktigt att sätta de nödvändiga rubrikerna i express-svaret. Dessa är de som fungerade för mig:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', yourExactHostname);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Svar #5

Jag är inte bekant med Axios, men såvitt jag vet finns det ett alternativ i JavaScript och AJAX

withCredentials: true

Detta kommer automatiskt att skicka kakan till klientsidan. Som ett exempel genereras detta scenario också med passportjs, som sätter en kaka på servern

Svar #6

Du kan använda withCredentials-egenskapen för att skicka kakor i förfrågan.

axios.get(`api_url`, { withCredentials: true })

Genom att sätta { withCredentials: true } kan du stöta på problem med korsande ursprung. För att lösa det behöver du använda

expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));

Här kan du läsa om withCredentials

Svar #7

Fatihs svar är fortfarande giltigt och bra år 2022.

Också axios.defaults.withCredentials=true kommer att göra tricket.

Det verkar som att det är föråldrat att skicka { withCredentials: true } till enskilda axios-anrop.

Svar #8

Vad som fungerade för mig:

Klientsidan:

import axios from 'axios';

const url = 'http://127.0.0.1:5000/api/v1';

export default {
  login(credentials) {
    return axios
      .post(`${url}/users/login/`, credentials, {
        withCredentials: true,
        credentials: 'include',
      })
      .then((response) => response.data);
  },
};

Observera: Inloggningsuppgifterna kommer att vara själva innehållet i POST-förfrågan, i detta fall användarens inloggningsinformation (Normalt erhållen från inloggningsformuläret):

{
    "email": "[email ",
    "password": "userpassword"
}

Serversidan:

const express = require('express');
const cors = require('cors');

const app = express();
const port = process.env.PORT || 5000;

app.use(
  cors({
    origin: [`http://localhost:${port}`, `https://localhost:${port}`],
    credentials: 'true',
  })
);

Relaterade artiklar