无法从响应请求中检索 cookie

Question

这是我的反应代码：

axios.get('http://localhost:5000/check').then(() => {
      axios.post('http://localhost:5000/cookie', null, { withCredentials: true });
    });

后端节点js：

import express, { Application, Request, Response } from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import cookieParser from 'cookie-parser';

const app: Application = express();

app.use(cookieParser());
app.use(cors({ credentials: true, origin: 'http://localhost:3000' }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/check', (req, res) => {
  res.cookie('token', 'asdasd3123123', { httpOnly: true });
  res.send(200);
});

app.post('/cookie', (req: Request, res) => {
  console.log(JSON.stringify(req.cookies));
  res.send();
});

app.listen(5000, () => {
  console.log('Server running on port 5000');
});

在响应中收到 cookie，但未在浏览器中设置，当我记录 request.cookies 时会打印一个空对象。

Answer 1

首先你需要以下包

npm i express-session connect-mongodb-session 或 yarn add express-session connect-mongodb-session

现在我们已经有了设置 mongoStore 和 express-session 中间件所需的包：

//Code in server.js/index.js (Depending on your server entry point)
import expressSession from "express-session";
import MongoDBStore from "connect-mongodb-session";
import cors from "cors";
const mongoStore = MongoDBStore(expressSession);

const store = new mongoStore({
  collection: "userSessions",
  uri: process.env.mongoURI,
  expires: 1000,
});
app.use(
  expressSession({
    name: "SESS_NAME",
    secret: "SESS_SECRET",
    store: store,
    saveUninitialized: false,
    resave: false,
    cookie: {
      sameSite: false,
      secure: process.env.NODE_ENV === "production",
      maxAge: 1000,
      httpOnly: true,
    },
  })
);

现在会话中间件已准备就绪，但现在您必须设置 cors 以接受您的 ReactApp，以便传递 cookie 并由服务器将其设置在那里

//Still you index.js/server.js (Server entry point)

app.use(
  cors({
    origin: "http://localhost:3000",
    methods: ["POST", "PUT", "GET", "OPTIONS", "HEAD"],
    credentials: true,
  })
);

现在我们的中间件都设置好了，让我们看看你的登录路径

router.post('/api/login', (req, res)=>{
    //Do all your logic and now below is how you would send down the cooki

    //Note that "user" is the retrieved user when you were validating in logic
    // So now you want to add user info to cookie so to validate in future
    const sessionUser = {
       id: user._id,
       username: user.username,
       email: user.email,
    };
    //Saving the info req session and this will automatically save in your     mongoDB as configured up in sever.js(Server entry point)
    request.session.user = sessionUser;

    //Now we send down the session cookie to client
    response.send(request.session.sessionID);

})

现在我们的服务器已准备就绪，但现在我们必须修复在客户端发出请求的方式，以便此流程可以 100% 工作：

以下代码：React 应用程序/您在处理登录时使用的任何前端

//So you will have all your form logic and validation and below
//You will have a function that will send request to server 

const login = () => {
    const data = new FormData();
    data.append("username", username);
    data.append("password", password);

    axios.post("http://localhost:5000/api/user-login", data, {
      withCredentials: true, // Now this is was the missing piece in the client side 
    });
};

现在有了所有这些，您现在拥有作为 httpOnly 的服务器会话 cookie

Answer 2

必须在第一次通话中包含{ withCredentials: true } ->

axios.get('http://localhost:5000/check', { withCredentials: true } ).then(() => {
      axios.post('http://localhost:5000/cookie', null, { withCredentials: true });
    });