Express会话对于不同的路线，节点和React有所不同

Question

我的问题是，当我“发布”登录时，登录后“获得”时，会话ID有所不同。 我正在前端作为水疗中心运行，而React路由器将所有其他URL作为“/”的子路线处理。前端具有package.json“代理”的后端代理：“ http：// localhost：5000”
我计划通过验证他们在会话中并使用React上下文来跟踪用户声明。但是，我似乎无法克服这个障碍。 多次），但无济

相关堆栈溢出帖子（

import './App.css';
import { Outlet } from 'react-router-dom';
import axios from 'axios';
import { useState } from 'react';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from './Components/Navbar';
import { useNavigate } from 'react-router-dom';

function App() {
  const [data, setData] = useState({})
  let navigate = useNavigate();
  axios.defaults.withCredentials = true

const makeGet = () => {
  let userData = { username: 'johnson72', password: 'a' }
  axios.get('/api/dashboard')
    .then((res) => console.log(res.status))
    .catch((err) => err.response.status === 500 ? navigate('/login', { replace: true }) && console.log('8err', err) : console.log(err))
}

const loginPost = () => {
  let userData = { username: 'johnson72', password: 'a' }
  axios.post('/login', userData, {withCredentials: true, credentials: 'include'})
    .then((res) => console.log(res.status))
    .catch((err) => console.log(err))
}

const handleGet = (e) => {
  e.preventDefault();
  makeGet();
}
const handleLogin = (e) => {
  e.preventDefault();
  loginPost();
}
  return (
    <>
    <div className="App">
      <div className='jumbotron-fluid d-flex align-items-center' style={{backgroundColor:'pink', height:'15rem'}}>
          <div className='container'>
            <Navbar />
            <div className='row'>
              <h3>{data?.username ? 'Hello ' + data?.username + ' ' + data?.email + '!' : ''}</h3>
            </div>
          </div>
      </div>
    <Outlet />
    </div>
    <Button variant='dark' onClick={handleGet}>Get</Button>
    <Button variant='dark' onClick={loginPost}>Login</Button>
    </>
  );
}
export default App;

我已经阅读了与此情况类似的所有

import express from 'express';
import mongoose from "mongoose";
import bodyParser from 'body-parser';
import routes from './routes/userRoutes';
import passport from 'passport'
import { User } from './datamodels/schema';
import session from 'express-session'
import cors from 'cors';
import cookieParser from 'cookie-parser';


const app = express();
const PORT = process.env.PORT || 5000;

mongoose.Promise = global.Promise
mongoose.connect('mongodb://localhost/test5', {
    useNewUrlParser: true,
    useUnifiedTopology: true
})

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

app.use(session({ 
    secret: "cats",
    // cookie: { maxAge: 600000 },
    resave: false,
    saveUninitialized: false,
}));
app.use(passport.initialize());
app.use(passport.session());

passport.use(User.createStrategy());
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser);

app.post('/login', passport.authenticate('local',{failureMessage: true}), (req, res) => {
    console.log('you have hit the login route');
    console.log('req is auth ', req.isAuthenticated());
    console.log(req.user.username);
    console.log(req.session);
    console.log(req.session.id);
    
})
app.get('/api/dashboard', (req, res) => {
    // console.log('req is auth api / dashboard ', req.isAuthenticated());
    console.log('session id from api dash ', req.session.id);
})

function isLoggedIn(req, res, next) {
    if (req.user) {
        console.log(`User Is Logged In!`)
        return next();
    }
    res.sendStatus(500)
}

routes(app); // chained route handler 
app.listen(PORT, () => console.log(`Server listening @ ${PORT}`))