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

Question

我的设置如下：

• http://localhost:3000中的Reactjs客户端
• http://localhost:5000中的Express服务器

客户端：

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/login发出发布请求
2. 服务器收到请求，制作一个jwt并放入httpOnly cookie，然后响应客户端
3. 客户端点击Ping按钮向api/ping发出post请求(包含以上cookie(
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");
});