从 React 应用程序接收 Express 会话 ID

Receive Express session Id from React app

我正在学习 Express.js,尝试创建一个 api 并将其连接到 React 前端。在 express 中,我使用 express-session 创建一个会话。对于身份验证,我使用 passport.js。 这是我的 app.js 文件的一部分:

const session = require('express-session');
const mongoDbStore = require('connect-mongodb-session')(session);
const store = new mongoDbStore({
    uri: 'mongodb://localhost:27017/DB_NAME',
    collection: 'UserSessions'
});

const app = express();

app.use(cors())

app.use(express.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const sessionConfig = {
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: true,
    store,
    cookie: {
        expires: Date.now() + 1000 * 60 * 60 * 24 * 7,
        maxAge: 1000 * 60 * 60 * 24 * 7,
        httpOnly: true
    }
}

app.use(session(sessionConfig));

app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser())


app.listen(8080, () => {
    console.log('listening on port 8080')
});

我的问题是,当我从我的 React 应用程序向我的后端发送请求时,我没有收到作为 cookie 的会话 ID。 在我的前端,我使用 axios , 发送请求:

import axios from 'axios';

export default axios.create({
    baseURL: "http://localhost:8080/",
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    }
});

为什么我的前端收不到来自后端的 cookie,我该如何解决这个问题? 谢谢!

因为您的 cookie 是一个 httpOnly cookie,所以为了发送 cookie,您可以通过 fetch 方法来完成:

const req = await fetch(URL,{
  method : "POST",
  credentials : "include", // to send HTTP only cookies
  headers: {
   "Contetnt-Type" : "application/json"
 },
 body : JSON.stringigy({name : "Bob"})
}):
const result = await req.json();

通过axios你还可以添加withCredential属性:

axios.get(BASE_URL + '/todos', { withCredentials: true });

并且在后端考虑这个参数:

 const corsOptions = {
   optionsSuccessStatus: 200,
   credentials: true,
 }
 app.use(cors(corsOptions))