Hacer que Axios envíe cookies en sus solicitudes automáticamente

Estoy enviando solicitudes del cliente a mi servidor Express.js usando Axios.

Configuré una cookie en el cliente y quiero leer esa cookie de todas las solicitudes de Axios sin agregarlas manualmente para solicitarlas manualmente.

Este es mi ejemplo de solicitud del lado del cliente:

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

Intenté acceder a los encabezados o cookies utilizando estas propiedades en mi servidor Express.js:

req.headers
req.cookies

Ninguno de ellos contenía cookies. Estoy usando el middleware del analizador de cookies:

app.use(cookieParser())

¿Cómo hago para que Axios envíe cookies en solicitudes automáticamente?

Editar:

Configuré cookies en el cliente de esta manera:

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:'/'})
        }
      })
    }
...

Si bien también utiliza Axios, no es relevante para la pregunta. Simplemente quiero incrustar cookies en todas mis solicitudes una vez que se establece una cookie.

Tuve el mismo problema y lo solucioné usando la withCredentialspropiedad.

XMLHttpRequest de un dominio diferente no puede establecer valores de cookie para su propio dominio a menos que withCredentials esté establecido en true antes de realizar la solicitud.

axios.get('some api url', {withCredentials: true});

TL; DR:

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

De la documentación de axios

withCredentials: false, // default

withCredentials indica si las solicitudes de control de acceso entre sitios deben realizarse con credenciales

Si pasa { withCredentials: true }con su solicitud, debería funcionar.

Una mejor manera sería establecer withCredentialscomo trueenaxios.defaults

axios.defaults.withCredentials = true

No estoy familiarizado con Axios, pero hasta donde sé, en javascript y ajax hay una opción

withCredentials: true

Esto enviará automáticamente la cookie al lado del cliente. Como ejemplo, este escenario también se genera con passportjs, que establece una cookie en el servidor.

También es importante establecer los encabezados necesarios en la respuesta rápida. Estos son los que me funcionaron:

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

Otra solución es usar esta biblioteca:

https://github.com/3846masa/axios-cookiejar-support

que integra el soporte "Tough Cookie" en Axios. Tenga en cuenta que este enfoque aún requiere la withCredentialsbandera.

para las personas que aún no pueden resolverlo, esta respuesta me ayudó. respuesta de stackoverflow: 34558264

TLDR; es necesario configurar {withCredentials: true}tanto la solicitud GET como la solicitud POST (obtener la cookie) para ambos axios y fetch.

¿Cómo hago para que Axios envíe cookies en solicitudes automáticamente?

conjunto axios.defaults.withCredentials = true;

o para alguna solicitud específica puedes usar axios.get(url,{withCredentials:true})

esto dará un error CORS si su 'Access-Control-Allow-Origin' está configurado como comodín (*). Por lo tanto, asegúrese de especificar la URL de origen de su solicitud.

por ejemplo: si su interfaz que realiza la solicitud se ejecuta en localhost: 3000, establezca el encabezado de respuesta como

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

también establece

res.setHeader('Access-Control-Allow-Credentials',true);

Puede utilizar la withCredentialspropiedad para pasar cookies en la solicitud.

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

Al configurar { withCredentials: true }, puede encontrar un problema de origen cruzado. Para resolver eso necesitas usar

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

Aquí puede leer sobre con Credenciales

Estás mezclando las dos ideas.

Tienes "react-cookie" y "axios"

react-cookie => es para manejar la cookie en el lado del cliente

axios => es para enviar solicitudes ajax al servidor

Con esa información, si desea que las cookies del lado del cliente también se comuniquen en el lado del backend, deberá conectarlas.

Nota del archivo Léame "react-cookie":

¡Galletas isomorfas!

Para poder acceder a las cookies del usuario mientras realiza la renderización del servidor, puede utilizar plugToRequest o setRawCookie.

enlace al archivo Léame

Si esto es lo que necesitas, genial.

Si no es así, comente para que pueda dar más detalles.

Así que tuve exactamente el mismo problema y perdí alrededor de 6 horas de mi vida buscando, tuve el

withCredentials: true

Pero el navegador aún no guardó la cookie hasta que, por alguna extraña razón, tuve la idea de cambiar la configuración:

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

Parece que siempre debe enviar primero la clave 'withCredentials'.