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

Question

我的节点.js服务器正在使用快速会话进行身份验证。

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 应用程序。

应用.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

不知道它是否对您有帮助，但我使用react-cookie进行会话cookie：

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

您只需将cookie与您想要的所有数据一起保存，仅使用反应

Answer 2

尝试使用 cors 模块并将原点设置为前端，并使用凭据选项：true。对我来说，它奏效了。