如何使用 React 和 Express 后端在浏览器上设置 Cookie 会话？

Question

这是我在 stackoverflow 上的第一篇文章，所以如果我的文章形式很奇怪，我提前道歉。我正在寻找使用带有 express-session 的会话来在反应应用程序中保持用户的连接。使用 PostMan，cookie 被保存，后端识别用户，同时从我的浏览器执行 axios 的发布请求，我发送一个 (res.send (req.session))) 接收到会话，但在另一个呼叫之后服务器无法识别。

我的服务器代码：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const sha1 = require('sha1');
const cors = require('cors');
const path = require('path');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const React = require('react');

const app = express();const MONGOURI = "mongodb+srv://loulou00:loulou00@cluster0.2t92n.mongodb.net/User?retryWrites=true&w=majority";
//connect to mongoose db
mongoose.connect(MONGOURI, {useNewUrlParser: true})
.then(() => console.log('DB CONNECTED'))
.catch(error => console.log(error));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../build')));
app.use(cors({credentials: true, origin: 'http://localhost:1200', exposedHeaders: ["set-cookie"],}));
let sess = {
  secret: 'keyboard cat',
  cookie: {
    maxAge: 60000
  },
  resave: true,
  saveUninitialized: true
}
 
if (app.get('env') === 'production') {
  app.set('trust proxy', 1) // trust first proxy
  sess.cookie.secure = true // serve secure cookies
}
 
app.use(session(sess))


const { Customer } = require('./models/customer');
const { response } = require('express');

//API ROUTE
app.get('/zeb', function (req, res) {
    res.send(req.session)
    console.log(req.session)
    //res.sendFile(path.join(__dirname, 'build', 'index.html'));

  });
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
})
app.post('/api/token_add', (req, res) => {
    if (req.body.secret == 'super secret')
    {
        Customer.findOne({ name: req.body.name }, (err, response) => {
           if (!response)
           {
               const token = sha1(req.body.name)
                const customer = new Customer({
                    name: req.body.name,
                    pack: req.body.pack,
                    token: token,
                }).save((e, resp) => {
                    if(e) res.status(400).send(e);
                    res.status(200).send(resp);
                    console.log(resp);
                })
           }
           else
           {
               res.status(400).send('This name is already use')
           } 
        })
    }
    
})

app.post('/api/token_connect', (req, res) => {
    Customer.findOne({ token: req.body.token }, (err, response) => {
        if(err) res.status(400).send(err)
        if (response) {            
            req.session.token = req.body.token;
            res.status(200).send(req.session);
            console.log(req.session)
        }
        else{
            res.send('Invalid token')
        }
    })
});
app.get('/api/token_getinfo', (req, res) => {
    console.log(req.session)
    Customer.findOne({ token: req.query.token }, (err, response) => {
        if(err) res.status(400).send(err)
        if (response) {            
            
            res.status(200).send(response);
        }
        else{
            res.send('Invalid token')
        }
    })
})
app.get('/api/token_connectsess', (req, res) => {
    console.log(req.session)
    Customer.findOne({ token: req.session.token }, (err, response) => {
        if(err) res.status(400).send(err)
        if (response) {            
            res.status(200).send(req.session);
        }
        else{
            res.send('Invalid token')
        }
    })
});



const port = process.env.PORT || 1200;

app.listen(port, () => {
    console.log('Server runnin on ' + port)
})

我的 axios 请求：

const connect = () => {
        axios.post('http://192.168.1.24:1200/api/token_connect', {token: token}
        ,{
  
            "headers": {
        
              "content-type": "application/json",
        
            }
          }).then((res) => {
            if (res.data.token)
            {
              console.log(res.data.token);
              setUser(res.data.token)  ;
            }
            
            
        })
    }

会议：

Session {
  cookie: {
    path: '/',
    _expires: 2020-10-26T22:14:31.294Z,
    originalMaxAge: 60000,
    httpOnly: true
  },
  token: 'f7ed376ba27377ae2680fafe1a67037df80b7e36'
}

Answer 1

您需要将此{withCredentials: true} 作为请求中的选项传递

例如：

axios.post(API_SERVER + '/login', { email, password }, { withCredentials: true })