Estoy desarrollando una aplicación fullstack con el backend Node + Express y el front-end NextJS (servidores separados) y tengo problemas para solicitar al navegador que adjunte la cookie que se vende como parte del encabezado de respuesta del servidor del nodo. Aquí está la configuración:
Usando la interfaz de usuario frontal (puerto 3001), pude vender la cookie con el módulo de cookies de JsHttp con el siguiente código del backend (puerto 3000):
import { serialize } from 'cookie'; ... const cookie = serialize(TOKEN_NAME, TOKEN_VAL, { httpOnly: true, sameSite: 'none', }); Pude observar el encabezado Set-Cookie en la respuesta.
Sin embargo, en las solicitudes posteriores, no vi que se adjuntara la cookie. He intentado jugar con los parámetros de serialización de cookies anteriores sin éxito:
Aquí están los argumentos que he intentado:
domain: ['.someAlias.com:3000', '.someAlias.com:3001']path: '/'domain: '.someAlias.com'Tengo la sensación de que podría deberse a que los puertos del servidor front-end y back-end son diferentes, pero todas las solicitudes se han iniciado en el lado del cliente yendo a localhost: 3000 (puerto back-end). Así que no estoy seguro de lo que posiblemente hice mal aquí.
====== ACTUALIZAR =======
Realicé un par de experimentos más y descubrí que cuando accedo a una URL directamente, NextJs representa la página del lado del servidor. Cuando hago la transición entre páginas dentro de la aplicación, la página se representa en el lado del cliente, donde consulta directamente el puerto backend 3000. Desafortunadamente, en ninguno de los escenarios vi que se estableciera ninguna cookie...
MISMO SITIO NINGUNO
Si usa SameSite=none , también necesita usar Secure , lo que significa que también debe usar SSL. Entonces está diciendo que sus 2 servidores son de dominios no relacionados, lo que probablemente no sea lo que desea, ya que los navegadores arrojarán cookies agresivamente.
OPCIONES DE PC LOCALES
Utilice esta configuración inicialmente en su computadora de desarrollo y asegúrese de que todas las URL utilizadas en el navegador y las llamadas Ajax usen http://somealias.com:3000 y http://somealias.com:3001 en lugar de localhost. Luego, las cookies se pegarán en una computadora de desarrollo.
OPCIONES IMPLEMENTADAS
Cuando realice la implementación en un entorno adecuado, utilice también SSL y establezca la opción de cookies Secure . Lo que es más importante, los dos dominios deben cumplir con los requisitos previos de hospedaje para compartir el mismo dominio base, por ejemplo:
Esto garantiza que las cookies emitidas se consideren de origen y en el mismo sitio, para que no se eliminen. Si no se cumplen las condiciones previas, no hay nada que pueda hacer en el código para solucionar el problema.
RECURSO SIMILAR
Este ejemplo de código de Curity utiliza dominios de desarrollo local y configuraciones de cookies del mismo sitio similares a las que he usado anteriormente y puede ser útil para comparar.
las cookies deben enviarse directamente desde el navegador al servidor, lo que no ocurre cuando utiliza nextJs. porque cuando acceda a su aplicación, next js mostrará su página en el lado del servidor y luego la solicitud se enviará desde el servidor nextjs a su servidor nodejs para que el navegador envíe las cookies al servidor nextjs, no a su servidor nodejs. la solución es enviar cookies manualmente desde el servidor nextjs a nodejs. ejemplo con la función fetchApi y getServerSideProps:
export async function getServerSideProps(context){ try{ const res = await fetch(`your-api-endpoint`, { method: 'GET', credentials:'include', headers: { 'Access-Control-Allow-Credentials': true, Cookie: context.req.headers.cookie }, }) const data = await res.json() if(!res.ok){ throw data } }catch(err){ return console.log(err) } return { props: { data } } }Debe establecer una cookie serializada con el método res.set Express.
Alternativamente, puede usar el método res.cookie sin un paquete de cookie adicional como este:
res.cookie(TOKEN_NAME, TOKEN_VAL, { httpOnly: true, sameSite: 'none', });Tenga en cuenta que no debe preocuparse por los diferentes puertos en el mismo dominio, ya que las cookies no están aisladas por puerto sino solo por dominio. Independientemente del puerto que utilice, las cookies deben estar visibles.