1

I have very complicated problem. My project has 2 API's. 1 API is for front-end of my application and 1 is for back-end. How it works, is just I send request from front-end API to back-end API.

Front-end API has URL http://localhost:8080/api/ and back-end API has URL http://localhost:3000.

The problem is front-end API can't get cookies from back-end API.

Here is example, function of front-end API just send request to back-end:

router.get('/test-front-api', async (req, res) => {
  const data = await api.get('/test-back-api')
  return res.json(data.data)
})

Back-and just sends cookie and some random text:

router.get("/test-back-api", (req, res) => {
  res.cookie("test", "cookie")
  res.send("Hi from back-end")
})

A here is where I have problem:

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)
})

But this cookie is not set in browser.

Let me show one more example. In browser I can just type http://localhost:8080/api/test-front-api and here is result, no cookie:

enter image description here

But, if I type not front-end API endpoint, but back-end, everything works perfect:

enter image description here

I was trying literally everything I found about cors options, axios {withCredentials: true} etc. Nothing works.

I have found one solution, but I don't like it:

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)
})

So, my question is why cookie is no set by front-end endpoint?

dokichan
  • 857
  • 2
  • 11
  • 44
  • Does this answer your question? [Express doesn't set a cookie](https://stackoverflow.com/questions/36824106/express-doesnt-set-a-cookie) – Mohit Sharma Jul 12 '22 at 17:59
  • @MohitSharma `I was trying literally everything I found about cors options, axios {withCredentials: true} etc. Nothing works.` – dokichan Jul 12 '22 at 18:00
  • so you must have to create minimal reproduction of problem so community can check what actual problem is. – Mohit Sharma Jul 12 '22 at 18:04

1 Answers1

0

I have found not reason of the problem, but solution that seems to be ok. As I said, there are 2 API's - front-end and back-end.

From back-end API I get this cookie, but actually, it makes no sense to send it in header. Why? Because the front-end API will send it back on front.

So, using example above, you can do this, first, just send this cookies in body:

router.get("/test-back-api", (req, res) => {
  res.json({cookie: "cookie"})
  res.send("Hi from back-end")
})

And then, in front-end API, handle it:

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)
})

But I still have no idea, why I can send the same headers twice, through back-end API, then front-end API and finally on front.

dokichan
  • 857
  • 2
  • 11
  • 44