【问题标题】:(Next.js, Express session) New session for every request made inside getInitialProps(Next.js,Express 会话)在 getInitialProps 内发出的每个请求的新会话
【发布时间】:2018-12-30 05:00:16
【问题描述】:

我正在尝试使Express sessionNext.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 是因为我想查看标题。原来这个请求有一个空的 headers 对象。如果我兑现承诺,我会得到我要求的数据。即使我刷新页面,此调用的会话 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(表达会话 ID),但问题是每当我刷新页面时 connect.sid cookie 都会更改,并且与客户端的会话 ID 不匹配API 调用(刷新页面后保持不变)。

我在 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 调用与快速会话一起使用,我将不胜感激!提前谢谢你。

【问题讨论】:

    标签: express express-session next.js


    【解决方案1】:

    我找到了解决方案。我不得不在请求标头中发送会话 cookie,而不是使用 credentials: 'include'。这是 getInitialProps 中的一个工作请求。

    static async getInitialProps(ctx) {
          const res = await fetch('path/to/endpoint', {
            headers: {
              cookie: ctx.req.headers.cookie,
            },
          });
          const user = await res.json();
    
          return { user };
        }
    

    【讨论】:

    • 谢谢!!为什么默认不发送cookie?!
    • 据我了解 CORS 是服务器和浏览器之间的合同。由于 getInitialProps 仅在服务器端渲染期间运行,而不在客户端渲染期间运行,因此它不了解 CORS,因此无法解释 credentials: 'include'。或许看文档会更好理解:developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…至于为什么默认不发送cookie,我想答案很简单,就是Next.js没有默认发送cookie的实现。
    • "getInitialProps 也将在客户端运行。如果您有只想在服务器上运行的代码,您可以检查 process.browser,它只会在客户端上运行。 " - 从频谱 nextjs 社区的聊天中复制
    • 这听起来与我的问题非常相似:stackoverflow.com/questions/57979227/…
    • 郑重声明,这对 axios 不太好。一旦我切换到 isomorphic-fetch,它就开始工作了。
    猜你喜欢
    • 1970-01-01
    • 2017-06-17
    • 2021-04-21
    • 2021-06-15
    • 1970-01-01
    • 2020-07-13
    • 1970-01-01
    • 2018-05-23
    • 1970-01-01
    相关资源
    最近更新 更多