Reactjs客户端无法从Express服务器获取cookie

Question

我的设置如下：

• Reactjs 客户端位于 http://localhost:3000
• Express 服务器位于 http://localhost:5000

客户端：

import { useState } from "react";
import axios from "axios";

import "./App.css";

const API = axios.create({ baseURL: "http://localhost:5000" });

function App() {
  const [auth, setAuth] = useState(false);
  const login = () => API.post("/login").then((res) => setAuth(true));
  const ping = () =>
    API.post("/ping", { withCredentials: true }).then((res) =>
      console.log(res)
    );
  return (
    <div className="wrapper">
      <button className="log-btn btn" onClick={login}>
        Login
      </button>
      {auth && (
        <button className="ping-btn btn" onClick={ping}>
          Ping
        </button>
      )}
    </div>
  );
}

export default App;

服务器：

import express from "express";
import cors from "cors";
import cookieParser from "cookie-parser";
import jwt from "jsonwebtoken";

// express
const app = express();

// middlewares
app.use(express.json({ limit: "60mb" }));
app.use(cors());
app.use(cookieParser());
app.use(function (req, res, next) {
  console.log("VLL");
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept"
  );
  next();
});

// routes
app.post("/login", (req, res) => {
  const token = jwt.sign({ name: "TOKEN" }, "SECRET_KEY", {
    expiresIn: "24h",
  });
  res.cookie("token", token, {
    httpOnly: true,
    secure: false,
  });
  res.status(202).send("LOGGED IN");
});

app.post("/ping", (req, res) => {
  console.log(req.cookies);
  res.status("202").send("YOU GOT IT");
});

// run
app.listen(5000, () => {
  console.log("Server is running on http://localhost:5000");
});

我的场景是

1. 客户端单击登录按钮向 api 发出 post 请求 /login
2. 服务器收到请求，创建一个 jwt 并放入 httpOnly cookie，然后响应客户端
3. 客户端单击 Ping 按钮向 api 发出 post 请求（包含上述 cookie） /ping
4. 服务器接收并验证来自请求的 cookie 内的 jwt

我可以在步骤 2 中看到从服务器发回的 cookie（使用 Chrome 开发工具）：

token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiVE9LRU4iLCJpYXQiOjE2NDg1NDM0MTgsImV4cCI6MTY0ODYyOTgxOH0._PiVonFtdyCo3O-1Xwupd2zxlE-J8DWa9OONVeP4e_s; Path=/; HttpOnly

但我在步骤 3 的请求中没有看到它然后在步骤 4 中，当尝试打印 req.cookies 时，我得到 [Object: null prototype] {}

我该如何解决这个问题？

谢谢你！

Answer 1

对于像我这样面临这个问题的人。所有行都有 // NEW 注释解决此问题

客户端：

import { useState } from "react";
import axios from "axios";
import "./App.css";
axios.defaults.withCredentials = true; // NEW

const API = axios.create({ baseURL: "http://localhost:5000" });

function App() {
  const [auth, setAuth] = useState(false);
  const login = () => API.post("/login").then((res) => setAuth(true));
  const ping = () =>
    API.post("/ping", { withCredentials: true }).then((res) =>
      console.log(res)
    );
  return (
    <div className="wrapper">
      <button className="log-btn btn" onClick={login}>
        Login
      </button>
      {auth && (
        <button className="ping-btn btn" onClick={ping}>
          Ping
        </button>
      )}
    </div>
  );
}

export default App;

服务器：

import express from "express";
import cors from "cors";
import cookieParser from "cookie-parser";
import jwt from "jsonwebtoken";

// express
const app = express();

// middlewares
app.use(express.json({ limit: "60mb" }));
app.use(
  cors({
    origin: "http://localhost:3000", // NEW
    credentials: true, // NEW
  })
);
app.use(cookieParser());
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept"
  );
  next();
});

// routes
app.post("/login", (req, res) => {
  const token = jwt.sign({ name: "TOKEN" }, "SECRET_KEY", {
    expiresIn: "24h",
  });
  res.cookie("token", token, {
    httpOnly: true,
    secure: false,
  });
  res.status(202).send("LOGGED IN");
});

app.post("/ping", (req, res) => {
  console.log(req.cookies);
  res.status("202").send("YOU GOT IT");
});

// run
app.listen(5000, () => {
  console.log("Server is running on http://localhost:5000");
});