开发模式下Chrome未设置Express Session Cookie

yptwkmov  于 2023-09-28  发布在  Go
关注(0)|答案(1)|浏览(90)

我已经为这个问题斗争了好几个小时了,我不能让它工作。我正在创建一个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设置正确。

yvt65v4c

yvt65v4c1#

要在Chrome中启用SameSite:'None'属性,您需要在开发环境中通过HTTPS为应用提供服务。您可以使用mkcert等工具来设置本地开发SSL证书。然后,确保安全。如果你使用这种方法的话,这是真的。或者您可以有条件地为开发环境添加SameSite=Lax。或者只是在开发中一起删除这条线。
同样在开发模式下,当应用程序没有在处理HTTPS终止的反向代理后运行时,您不需要设置app.set('trust proxy',1)。不如试试这个,

process.env.NODE_ENV === 'production' && app.set('trust proxy', 1)

相关问题