如何从 React 中的 express-session 获取会话 cookie

Question

我的 node.js 服务器正在使用 express-session 进行身份验证。

const express = require('express')
const session = require('express-session')

const app = express()

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://192.168.1.24:3000");
    res.header("Access-Control-Allow-Credentials", 'true')
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
})

app.use(session({ secret: 'neverGotWhatShouldBeHere', resave: false, saveUninitialized: false }))

app.get('/login', (req, res) => {
    req.session.userAuth = "some data"
    req.session.cookie.maxAge = 10 * 1000
    res.send({ prob: 'no' })
})

app.get('/restricted', (req, res) => {
    if (req.session.userAuth == "some data")
        res.send({ prob: 'no', data: 'top secret confidential data' })
    else
        res.send({ prob: 'log in to see data' })
})

app.listen(3000, () => console.log(`Example app listening at http://localhost:3000`))

当我从浏览器访问它时，一切正常。我可以看到 cookie 并在 10 秒后消失，迫使我重新登录。

然后我使用 create-react-app 创建了一个 React 应用程序。

App.js：

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  remoteLogin = () => {
    fetch('http://192.168.1.25/login', { credentials: 'include' }).then((response) => {
      return response.json().then((jsonResponse) => {
        console.log(jsonResponse)
      }).catch((err) => {
        console.log("Error: " + err)
      })
    })
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.remoteLogin} >Log in</button>
      </div>
    )
  }
}

export default App;

当我点击按钮时，我看到了来自服务器的 json 数据，但我没有收到 cookie。

如何在 React 应用程序中获取 cookie？

Answer 1

尝试使用 cors 模块并将源设置为前端和选项 withCredentials: true。对我来说它有效。

Answer 2

不知道它是否对你有帮助，但我使用 react-cookie 来作为我的会话 cookie：

https://www.npmjs.com/package/react-cookies

你只需用你想要的所有数据保存你的cookie，只有反应