Tengo mi backend alojado en un servidor, por ejemplo, backend.vercel.app y el frontend en otro servidor, por ejemplo, frontend.vercel.app
Cada vez que un usuario envía una solicitud a la ruta /login de sesión, configuro la cookie de esta manera:
const setCookie = (req, res, token) => { res.cookie('jwt', token, { expires: new Date(Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000) }); }; En la interfaz, estoy usando axios para enviar una solicitud a la ruta backend.vercel.app/login , con {withCredentials: true}
Pero, la cookie no se configura, incluso después de un inicio de sesión exitoso.
Las cookies están ahí en la API backend, pero no en el frontend: Imagen de cookies disponibles
¿Qué me estoy perdiendo?
Cuando configura la cookie en backend.vercel.app , por ejemplo, solo se puede acceder a la cookie que configura desde ese mismo subdominio, y otros subdominios no pueden acceder a ella. Para que la cookie se comparta, debe configurar la cookie para el dominio principal.
P.ej:
res.cookie('jwt', token, { expires: new Date(Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000), domain: "vercel.app" });Esto debería funcionar, sin embargo, si no es así, debe verificar la configuración de cors.
ACTUALIZACIÓN: solucioné este problema especificando manualmente el method: 'POST' en la solicitud de inicio de sesión. Y usé este middleware en el backend:
app.use((req, res, next) => { res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,UPDATE,OPTIONS'); res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'); next(); });También apliqué la configuración CORS, gracias al comentario de Kenneth Lew.
¡Salud!