我已经为这个问题斗争了好几个小时了,我不能让它工作。我正在创建一个react应用程序(vite),后端我使用NodeJS和Express。我还在后端使用express-session来处理会话。由于某些原因,会话cookie未在google Chrome中设置。它在Safari和Firefox中运行良好。我已经尝试了一切,我发现从其他答案与类似的问题,但没有一个工作到目前为止。我可能错过了什么,但我不知道是什么。这是我的后端代码。需要注意的是,我目前只处于localhost和开发模式。我还没有在生产上尝试过这个,因为应用程序还没有准备好。
//app.js (backend)
const express = require('express');
const cookieParser = require('cookie-parser');
const cors = require('cors');
const dotenv = require('dotenv');
const { connect, MONGO_URI } = require('./db');
const session = require('express-session');
const MongoStore = require('connect-mongo');
connect();
dotenv.config();
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.set('trust proxy', 1);
const FRONTEND_URL = process.env.FRONTEND_URL.split(',') || [
'http://localhost:5533/',
];
app.use(
cors({
origin: FRONTEND_URL,
credentials: true,
})
);
app.options('*', cors());
const port = process.env.PORT || 8080;
app.use(
session({
secret: process.env.SESSION_SECRET || 'MySecret$',
resave: false,
saveUninitialized: false,
cookie: {
maxAge: 600000,
sameSite: 'none',
secure: false,
httpOnly: true,
},
store: MongoStore.create({
mongoUrl: MONGO_URI,
}),
})
);
app.use('/api', require('./routes/index.routes'));
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
从我的react应用程序中,当使用Fetch调用API时,我正在传递凭据:'include'选项。
const response = await fetch(API_URL + '/visitor', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({}),
credentials: 'include',
});
你知道为什么Chrome没有设置会话cookie吗?任何帮助都将不胜感激。
正如我提到的Firefox甚至Safari都能正常工作,会话cookie设置正确。
1条答案
按热度按时间yvt65v4c1#
要在Chrome中启用SameSite:'None'属性,您需要在开发环境中通过HTTPS为应用提供服务。您可以使用mkcert等工具来设置本地开发SSL证书。然后,确保安全。如果你使用这种方法的话,这是真的。或者您可以有条件地为开发环境添加SameSite=Lax。或者只是在开发中一起删除这条线。
同样在开发模式下,当应用程序没有在处理HTTPS终止的反向代理后运行时,您不需要设置app.set('trust proxy',1)。不如试试这个,