(Next.js,Express会话)在getInitialProps内部进行的每个请求的新会话

表达 React.js

小胖

2020-03-23

我正在尝试使Express会话可以与Next.js一起使用,并且已经在客户端成功完成了此操作,但是我在getInitialProps内部进行的API调用遇到了麻烦。

注意:我正在使用isomorphic-unfetch进行API调用。我的Next.js安装在localhost:3000上运行,我的Express服务器在localhost:5000上运行。

这是客户端API调用的示例(在getInitialProps之外):

componentDidMount() {
  fetch('/path/to/endpoint', {
    method: 'GET',
    credentials: 'include',
  }).then((res) => console.log(res));
}

我在这里记录res,因为我想查看标题。原来这个请求有一个空的标题对象。如果我能兑现诺言,我会得到我要求的数据。即使刷新页面,此调用中的会话ID在服务器上也保持一致。一切都按预期工作。

这是getInitialProps内部的API调用示例:

static async getInitialProps(ctx) {
  fetch('/path/to/endpoint', {
    method: 'GET',
    credentials: 'include',
  }).then((res) => console.log(res.headers));
}

再次登录以查看标题。此响应具有标题,它们如下所示:

Headers {
_headers:
{ 'x-powered-by': [ 'Express' ],
'access-control-allow-origin': [ 'http://localhost:3000' ],
vary: [ 'Origin, Accept-Encoding' ],
'access-control-allow-credentials': [ 'true' ],
'x-frame-options': [ 'SAMEORIGIN' ],
'x-xss-protection': [ '1; mode=block' ],
'set-cookie'['YgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS','connect.sid=s%3AYgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS.Oye%2F7%2BsyXrrLJwphEJ3nq3yMkBhM3%2Fm4PCl9KIV%2FTzA; Path=/; Expires=Sun, 05 Aug 2018 15:56:52 GMT;     HttpOnly' ],
'content-type': [ 'application/json; charset=utf-8' ],
'content-length': [ '246' ],
etag: [ 'W/"f6-82FKQ+ERtkxLiKa8hEIeY4kgGgE"' ],
date: [ 'Sun, 22 Jul 2018 15:56:52 GMT' ],
connection: [ 'close' ] } }

如您所见,我的set-cookie标头中有connect.sid(express会话ID),但是问题是,每当刷新页面时connect.sid cookie都会更改,并且与客户端API调用的会话ID不匹配(即使刷新页面后也保持不变)。

我在Express服务器上的会话对象如下所示:

app.use(
  session({
  resave: false,
  name: 'connect.sid',
  saveUninitialized: false,
  secret: SESSION_SECRET,
  unset: 'destroy',
  cookie: {
    maxAge: 3600000 * 24 * 14,
    secure: false,
  },
  store: new MongoStore({
    url: mongoUrl,
    autoReconnect: true,
  }),
})

);

如果有人知道如何从getInitialProps内部进行快速调用来进行API调用,我将不胜感激!先感谢您。

第3044篇《(Next.js,Express会话)在getInitialProps内部进行的每个请求的新会话》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android