0
582
Vistas¿Cómo usar una aplicación NextJS con un backend Node.js existente?
Actualmente tengo un backend de Node.js existente que funciona con mi proyecto create-react-app.
Estoy migrando a NextJS pero tengo algunas preguntas.
Tengo un proceso de autenticación JWT simple:
- frontend realiza una solicitud a
my-server/api/auth - backend autentica al usuario, agrega token de actualización como cookie
httpOnlyal encabezado de respuesta. y devuelve el token de acceso como cuerpo de respuesta. - Cada próxima llamada al servidor incluirá el token de acceso y el token de actualización en las cookies.
Mi pregunta es si mi aplicación NextJS, que se implementa en vercel con el dominio: www.my-nextjs-app.vercel.com , realiza solicitudes a mi aplicación de backend que se implementa en aws en www.my-backend-app.aws.com , entonces las cookies de mi conjunto de back-end no se aplicarán debido a CORS (ya que consideraron cookies de terceros de diferentes dominios).
(Eso también es cierto si servidor localmente mi aplicación create-react-app en localhost:3000 y realizo solicitudes a mi servidor local en localhost:5000 , Chrome no mostrará la cookie httpOnly porque es de un dominio diferente)
Esto es diferente de mi aplicación create-react, que se sirvió directamente desde mi backend en el mismo dominio y, por lo tanto, no tuvo problemas con las cookies de terceros.
¿Hay una solución para eso?
Editar: Además, ¿Next.JS realmente está destinado a usarse con un servidor existente? o solo sin servidor
1 Respuestas
Responde la pregunta0
El uso de múltiples servidores para ui y backend es bastante común. Hay varias maneras de resolver su problema:
1. Implemente todo en un dominio y configure el proxy inverso (la imagen se toma de aquí )
Por supuesto, esos servidores de organización pueden ser diferentes aplicaciones en la máquina que se ejecutan en diferentes puertos. Podría usar nginx como un proxy inverso, la configuración se vería así:
server { listen 80; server_name yourapp.com; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://uiapp.com:3000; } location /backend/ { rewrite ^/backend(/.*)$ $1 break; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://backendapp.com:8000; } } La directiva de rewrite es necesaria si desea enviar solicitudes de proxy desde http://yourapp.com/backend/foobar a http://backendapp.com:8000/foobar
Más detalles sobre cómo configurar nginx está aquí . Pero hay muchos otros guiados en Internet.
También puede usar middleware para su aplicación node.js existente para pasar por proxy a su aplicación NextJs.
2. Implemente su servidor backend en el subdominio. Si especifica Dominio para cookies de solo http, también se enviarán a subdominios. Por ejemplo, si usa yourapp.com como dominio, la cookie estará disponible en backend.yourapp.com y yourapp.com
Set-Cookie: name=value; domain=yourapp.com3.Use el encabezado de autorización en lugar de las cookies. En este caso, deberá enviar tokens a la aplicación de UI y los almacenará en cookies, sessionStorage o localStorage y su aplicación de UI agregará un encabezado de Autorización con su token para su backend:
var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader('Authorization', 'Bearer ' + token); return xhr;Por supuesto, en este caso, su backend debe poder aceptar el token en el encabezado de Autorización.