如何解决快速会话在每个请求上重置会话
我有一个 VueJS 项目,它使用 axios 调用另一个域上的服务器。在这台服务器上,我需要在会话中保存一些值,这样就不需要在每次请求时都查找它们。
服务器是 NodeJS 并在 Heroku 上运行,我使用 Redis 进行内存存储。我可以成功地将数据保存到会话中,但是对于每个新请求,系统都会创建一个具有新 ID 的新会话,因此我无法访问在上一个请求期间保存的值。
编辑 根据一些建议更新代码后,我可以在会话 cookie 的网络控制台中看到以下错误:
Preflight Invalid Allow Credentials
编辑 2 通过向 corsOptions 添加“credentials: true”,我能够解决 Preflight Invalid Allow Credentials。这解决了我在会话中在网络中看到的错误,但我仍然为每个请求获取一个新的会话 ID。
服务器上的代码:
const express = require('express');
const app = express();
const cors = require('cors');
var corsWhitelist = ['http://127.0.0.1:8080','http://127.0.0.1:8081']
var corsOptions = {
origin: function (origin,callback) {
if (corsWhitelist.indexOf(origin) !== -1) {
callback(null,true)
} else {
callback(new Error('Not allowed by CORS - '+origin))
}
},credentials: true
}
let REdis_URL = process.env.REdis_URL;
var Redis = require('ioredis');
const session = require('express-session');
const cookieParser = require('cookie-parser');
const RedisStore = require('connect-redis')(session);
const sessionClient = new Redis(REdis_URL)
sessionClient.on('error',function (err) {
console.log('Could not establish a connection with redis. ' + err);
});
sessionClient.on('connect',function (err) {
console.log('connected to redis successfully');
});
app.set('trust proxy',1)
app.use(cookieParser());
app.use(session({
store: new RedisStore({ client: sessionClient }),secret: 'someSecret',resave: false,saveUninitialized: true,cookie: {
secure: false,httpOnly: false,maxAge: 1000 * 60 * 10
}
}))
app.use(cors(corsOptions));
app.options('*',cors(corsOptions))
// Add headers
app.use(function (req,res,next) {
if (corsWhitelist.indexOf(req.headers.origin) !== -1) {
res.setHeader('Access-Control-Allow-Origin',req.headers.origin);
res.setHeader('Access-Control-Allow-Headers','Origin,X-Requested-With,Content-Type,Accept');
res.setHeader('Access-Control-Allow-Methods','GET,POST,OPTIONS,PUT,PATCH,DELETE');
res.setHeader('Access-Control-Allow-Credentials','true');
}
next();
});
const getUser = async function(req,next) {
if (!req.session.user) {
req.session.user = "test@example.com"
req.session.save()
}
next()
}
app.get('/session',getUser,(req,res) => {
// get the session id
console.log('session id:',req.session.id)
// the session will be automatically stored in Redis with the key prefix 'sess:'
const sessionKey = `sess:${req.session.id}`;
// let's see what is in there
client.get(sessionKey,(err,data) => {
console.log('session data in redis:',data)
})
res.status(200).send('OK');
})
VueJS 上的方法:
getSession: async function () {
axios({
url: 'https://server.example.com/session',withCredentials: true,}).then(res => {
console.log(res)
})
},
解决方法
需要进行一些更改才能使其正常工作:
预检设置被设置了两次,所以在下面的代码中,我需要删除第二行:
{
bar: number,foo?: boolean
}
我试图在“// Add headers”下设置的标头没有进入预检请求,所以我需要将“credentials: true”添加到 corsOptions 并删除“// Add”下的代码标题”:
app.use(cors(corsOptions));
app.options('*',cors(corsOptions)) //delete this
最后但并非最不重要的一点是,会话定义中的 cookie 设置不适用于跨域请求。具体来说,“sameSite: 'none'”和“secure: true”是必要的。结果如下:
var corsOptions = {
origin: function (origin,callback) {
if (corsWhitelist.indexOf(origin) !== -1) {
callback(null,true)
} else {
callback(new Error('Not allowed by CORS - '+origin))
}
},credentials: true
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。