Why can't I retrieve the cookies on the client side?

Question

I'm currently working on a chat app. The frontend is built with react and is deployed on vercel, and the backend is built with express and is on heroku. So the app is currently in production mode.

On the login page, when the user provides their credentials (email and password), a request gets sent to the /login route on the backend where the credentials the user provided are checked to see if they're correct. Simple enough. If the credentials are not correct, a 500 status code is sent back to the client, but if they are correct, 2 cookies are created, and they're sent back to the client along with a 200 status code.

Here's where I'm struggling. When the user provides the right information, the 2 cookies get created on the backend and are sent to the client. I know this because I can see the 2 cookies in the Cookies tab of the chrome developer tools. But when I try to output the value of the cookies using document.cookie, it comes out as an empty string.

Frontend:

    const response = await fetch(url, {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({email: email, password: password})
    })

Backend:

    res.cookie("Cookie1", value1, {sameSite: "none", secure: true, httpOnly: false})
    res.cookie("Cookie2", value2, {sameSite: "none", secure: true, httpOnly: true})

Server:

const cors = require('cors')

const corsOptions = { origin: originUrl, credentials: true, methods: ['GET', 'POST'] }

app.use(cors(corsOptions))

// I made sure to declare the above before declaring the routes

Additional Info:

1. Just to be clear, when I use document.cookie, I'm expecting to just see the value of Cookie1. I know I won't see the value of Cookie2 since I set its httpOnly attribute to true.
2. I've searched all over stackoverflow for this problem and while I did see a few posts that asked the same question I'm asking, those posts were all solved by setting the httpOnly attribute to false. This is not the case in this situation.
3. Another thing that I noticed on other posts that were different from this post is that the other posts were hosting their frontend and backend locally (on their localhost), whereas I have them deployed elsewhere. (Not sure if this matters.)
4. I'm not sure if this is relevant, but after the request gets performed and the cookies can be seen in the chrome developer tools, when I reload the page, those cookies disappear. (I feel like this shouldn't happen, but I'm a beginner so I could be wrong.)

Please let me know if you there's anything else you'd like to know. Thanks in advance.

Answer 1

I don't have much knowledge of frontend , but to access cookies on frontend, you have to use proxy. Cookies can only be access on same port or server.
See this link, hope this might help you!