Tengo un problema muy complicado. Mi proyecto tiene 2 API. 1 API es para el front-end de mi aplicación y 1 es para el back-end. Cómo funciona, es solo que envío una solicitud desde la API de front-end a la API de back-end.
La API de front-end tiene la URL http://localhost:8080/api/ y la API de back-end tiene la URL http://localhost:3000 .
El problema es que la API de front-end no puede obtener cookies de la API de back-end .
Aquí hay un ejemplo, la función de la API de front-end simplemente envía una solicitud al back-end:
router.get('/test-front-api', async (req, res) => { const data = await api.get('/test-back-api') return res.json(data.data) })De vuelta, y solo envía una cookie y un texto aleatorio:
router.get("/test-back-api", (req, res) => { res.cookie("test", "cookie") res.send("Hi from back-end") })A aquí es donde tengo un problema:
router.get('/test-front-api', async (req, res) => { const data = await api.get('/test-back-api') console.log(data.headers) // If you do console.log here you will this cookie test return res.json(data.data) })Pero esta cookie no está configurada en el navegador.
Permítanme mostrar un ejemplo más. En el navegador, solo puedo escribir http://localhost:8080/api/test-front-api y aquí está el resultado, sin cookies:
Pero, si no escribo el punto final de la API front-end, sino el back-end, todo funciona perfectamente:
Estaba probando literalmente todo lo que encontré sobre las opciones cors , axios {withCredentials: true} , etc. Nada funciona.
He encontrado una solución, pero no me gusta:
router.get('/test-front-api', async (req, res) => { const data = await api.get('/test-back-api') // Something like this res.cookie("test", JSON.stringify(data.headers['set-cookie'])) return res.json(data.data) })Entonces, mi pregunta es ¿por qué la cookie no está configurada por el punto final del front-end ?
No he encontrado la razón del problema, sino una solución que parece estar bien. Como dije, hay 2 API: front-end y back-end.
De la API de back-end obtengo esta cookie, pero en realidad, no tiene sentido enviarla en el encabezado. ¿Por qué? Porque la API de front-end lo enviará de vuelta al frente.
Entonces, usando el ejemplo anterior, puede hacer esto, primero, simplemente envíe estas cookies en el cuerpo:
router.get("/test-back-api", (req, res) => { res.json({cookie: "cookie"}) res.send("Hi from back-end") })Y luego, en la API de front-end, manéjelo:
router.get('/test-front-api', async (req, res) => { const data = await api.get('/test-back-api') res.cookie("test", data.cookie) return res.json(data.data) })Pero todavía no tengo idea de por qué puedo enviar los mismos encabezados dos veces, a través de la API de back-end, luego la API de front-end y finalmente al frente.