How to get cookies on client side?

[dramounlong3]

Hi all, I am a beginner on react and node.js.
I create an express server on port 8000 by node.js template and create a react server on port 3000 in the same codesandbox.
When I send a "GET" request to server, the server will set a cookie and response to client.
Although cookie can be seen on edge browser's response header content (check on borwser network), I can't use the pagckage of universal-cookie to get cookie on client.

Client side can't find the cookie name "context" after print all cookies on console.

(I already use "cors" package and setup relative infromation on client and server side.)

I already try a lot of way to generate a cookie on express server but still can't get cookie on client. Whether the cookie is blocked by something means this way is impossible or my setup is incorrect? Does anyone can help me and I would appreciate a lot.

Here is my test code on a react component: or link

import React from "react";
import axios from "axios";
import Cookies from "universal-cookie";

const Notfoundcomponent = () => {
  const cookies = new Cookies();

  const test = async () => {
    axios
      .get("https://mcqmo-8000.sse.codesandbox.io/api/user/postman", {
        headers: {
          Authorization:
            "JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MWQ4NDRjYmE5YzViMmQ0ZjkzYTgwYjkiLCJlbWFpbCI6ImxvbmczQGdtYWlsLmNvbSIsImlhdCI6MTY0MTk3ODM1Nn0.4HaNJBi6iv0iSz-9ps6MezIErYt7LN9IrNzAhIHV4BE"
        },
        withCredentials: true
      })
      .then((res) => {
        console.log(res);
        let context = cookies.getAll();
        console.log("context= ", context);  // it always can't get a cookie.
      })
      .catch((e) => console.log(e));
  };

  test();

  return <div>404 not found</div>;
};

export default Notfoundcomponent;

And here is one of router on server side: or link

.
.
.
app.use(
  cors({
    credentials: true,
    origin: "https://mcqmo-3000.sse.codesandbox.io"
  })
);
.
.
.

router.get("/postman", (req, res) => {
  res.setHeader(
    "Access-Control-Allow-Origin",
    "https://mcqmo-3000.sse.codesandbox.io"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);
  res.cookie("context", "lets check!", { httpOnly: false }).send("yo");

//Below is the combination I have tried. You can skipped it.
  //res.setHeader("Set-Cookie", "aaas=testest; path=/; SameSite=none; Secure;");
  //res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  // res
  //   .setHeader(
  //     "Set-Cookie",
  //     "context=testest; Max-Age=3000; HttpOnly=false, Secure"
  //   )
  //   .send("123456");
  //res.header("context", "youDon'tKnow", { httpOnly: false }).send("yo");
  //res.cookie("context", "lets check!", { httpOnly: false }).send("yo");
  // const cookies = new Cookies(req.headers.cookie);
  // res
  //   .cookie("context", "youDon'tKnow", {
  //     httpOnly: false
  //   })
  //   .send("frompostman");
});

[JamesACS]

Hey @dramounlong3 - You may have more luck finding an answer to your issue in our Discord community!

You can join here: https://discord.gg/69YVBDft

[dramounlong3]

Hi @JamesACS
Thank you for your reply. In Discord community, I don't find anything with keyword "cookie" on #webdev-help
Finally I founded the problem is the cookie domain.

Here is the correct code share to others.

    res.cookie(
      "context",
      { success: true, token: "JWT " + token, user },
      { httpOnly: false, domain: ".codesandbox.io" }  //the domain value should be specified on .codesandbox.io
    ).redirect("https://mcqmo-3000.sse.codesandbox.io/");

[JamesACS]

Thank you so much for providing this @dramounlong3 - I'll make sure we note it internally incase anybody else runs into the same issue.