在开发模式下,未在 Chrome 中设置快速会话 Cookie

Express Session Cookie not set in Chrome in development mode

提问人:Carlos Sosa 提问时间:9/22/2023 更新时间:9/22/2023 访问量:88

问:

我已经为这个问题奋斗了好几个小时,但我无法让它工作。我正在创建一个 react 应用程序 (vite),对于后端,我正在将 NodeJS 与 Express 一起使用。我还在后端使用 express-session 来处理会话。由于某种原因,未在谷歌浏览器中设置会话cookie。它在 Safari 和 Firefox 中运行良好。我已经尝试了从其他有类似问题的答案中找到的所有方法,但到目前为止都没有奏效。我可能遗漏了一些东西,但不知道是什么。这是我的后端代码。需要注意的是,我目前仅处于 localhost 和开发模式。我还没有在生产中尝试过这个,因为APP还没有准备好。

//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}`);
});

当使用 Fetch 调用 API 时,我从我的 react 应用程序传递凭据:“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 设置正确。

节点 .js 谷歌浏览器 会话 cookie 速成会话

评论


答:

1赞 Nazrul Chowdhury 9/22/2023 #1

要在 Chrome 中启用 SameSite:'None' 属性,您需要在开发环境中通过 HTTPS 为应用提供服务。您可以使用 mkcert 等工具设置本地开发 SSL 证书。如果要使用此方法,则设置 secure: true。或者,您可以有条件地为开发环境添加 SameSite=Lax。或者干脆在开发中一起删除此行。
同样在开发模式下,当应用程序不在处理 HTTPS 终止的反向代理后面运行时,无需设置 app.set('trust proxy', 1)。试试这样的事情,

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

评论

1赞 Carlos Sosa 9/22/2023
谢谢 Nazrul Chowdhury - 通过设置 sameSite = 'lax' 在开发中起作用。所以基本上在开发中,我必须设置 sameStie = 'lax',并且 secure: false 在生产中 sameSite = 'none' secure = true。另外,作为旁注,在其他情况下,Safari在生产中设置会话cookie时,后端和前端需要位于同一顶级域中。