javascript - que - axios vue

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

Question

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 => ...

Traté de acceder a encabezados o cookies mediante el uso de estas propiedades en mi servidor Express.js:

req.headers
req.cookies

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

app.use(cookieParser())

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

Editar:

Configuré la cookie en el cliente así:

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 está utilizando Axios, no es relevante para la pregunta. Simplemente quiero insertar cookies en todas mis solicitudes una vez que se configura una cookie.

Answer 1

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

establecer axios.defaults.withCredentials = true;

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

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

por ejemplo: si su front-end que realiza la solicitud se ejecuta en localhost: 3000, configure el encabezado de respuesta como

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

también establecer

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

Answer 2

De la documentación de axios

withCredentials: false, // predeterminado

withCredentials indica si las solicitudes de control de acceso a través del sitio se deben hacer con credenciales

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

Una mejor manera sería establecer con withCredentials como true en axios.defaults

axios.defaults.withCredentials = true

Answer 3

Estás obteniendo los dos pensamientos mezclados.

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 se comuniquen también 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 se procesa el servidor, puede usar plugToRequest o setRawCookie.

enlace al archivo Léame

Si esto es lo que necesitas, genial.

Si no, por favor comente para que pueda elaborar más.

Answer 4

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

Answer 5

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 el indicador withCredentials .

Answer 6

También es importante establecer los encabezados necesarios en la respuesta expresa. 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();
});

Answer 7

Tuve el mismo problema y lo withCredential propiedad withCredential .

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

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

Answer 8

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

TLDR; uno necesita establecer {withCredentials: true} tanto en la solicitud GET como en la solicitud POST (obtener la cookie) para ambos axios y también para buscar.