使用 axios 表达 CORS 请求失败

Question

I have an authentication cookie that I want to send to an express server. The request is supposed to send both JWT from the localStorage(which it does) and a cookie that is previously set.

The cookie is set by the following response from an endpoint:

 res
    .cookie("cookiename", "cookievalue", {
      maxAge: 86400 * 1000, 
      httpOnly: false, 
      secure: false, 
    })
    .sendStatus(200);

The cookie appears correcly in the DevTools:

Then, I want to use the cookie in every subsequent request: First I set withCredentials globally to true:

axios.defaults.withCredentials = true;

Then I make a request with intentions of sending the cookie:

axios
      .get("http://localhost:5000/userLikedPlaces", {
        headers: {
          jwt: localStorage.getItem("jwt"),
          "X-Requested-With": "XMLHttpRequest",
          "Content-Type": "application/json",
          "Access-Control-Allow-Credentials": true,
        },
        params: { limit: likedQueryOffset },
      })

However, I get an error:

By what I understand, I should set Access-Control-Allow-Origin to my localhost:3000 address, so I copy the following code:

  server.use(function (req, res, next) {
  // Website you wish to allow to connect
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");

  // Request methods you wish to allow
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );

  // Request headers you wish to allow
  res.setHeader(
    "Access-Control-Allow-Headers",
    "X-Requested-With,content-type"
  );

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader("Access-Control-Allow-Credentials", true);

  // Pass to next layer of middleware
  next();
});

The other middlewares are:

server.use(cors());
server.use(cookieParser("MySecret"));
server.use(bodyParser.urlencoded({ extended: false }));
server.use(bodyParser.json({ limit: "10kb" }));
server.use(cors({ credentials: true, origin: "http://localhost:3000" }));

I am rather bewildered, since I have looked at a considerable number of similar questions, and this header seems to fix the issue, but apparently not here. My question is how to fix the CORS issue, getting the cookie from localhost:3000(client) to localhost:5000(server)?

Answer 1

The problem was the fact that the default configuration of the CORS middleware uses the wildcard attribute, and is the reason why all request were blocked. Solution is to use the custom configuration:

server.use(cors({ credentials: true, origin: "http://localhost:3000" }));