如何使用 next.js 的 getInitialProps 方法获取 cookie？

Question

我遇到了 next.js

的问题

当我从 async static getInitialProps 发出请求时，我无法获取我的 cookie。我得到 undefined

然而，当我在 componentWillMount 中制作时，没有问题。不幸的是，为时已晚，因为我需要在调用组件之前获取 cookie 信息。所以我需要在 getInitialProps

中获取它

这是我已经尝试过但没有成功的方法：

static async getInitialProps () {
      const res = await axios.get('http://mybackend/getCookie');
      return {data : res.data}
    }
    
    //res.data = undefined

有什么建议吗？

Answer 1

这可能是客户端与服务器之间的关系 - componentWillMount() 客户端上只有运行s，因此那里的请求将始终包含客户端的 cookie。但是，getInitialProps 可能会在服务器上运行，在这种情况下，您必须手动设置 cookie。

您可以通过测试 options.req:

的存在来判断它在客户端还是服务器上是否运行ning

static getInitialProps({ req }) {
  if (req) {
    console.log('on server, need to copy cookies from req')
  } else {
    console.log('on client, cookies are automatic')
  }
  return {};
}

并且，当运行在服务器上连接时，您可以通过检查req.headers.cookie来读取客户端的cookie。所以，对于 axios，它可能看起来像这样：

static async getInitialProps({req}) {
  const res = await axios({
    url: 'http://mybackend/getCookie',
    // manually copy cookie on server,
    // let browser handle it automatically on client
    headers: req ? {cookie: req.headers.cookie} : undefined,
  });
  return {data : res.data}
}

Answer 2

如果使用 isomorphic-fetch api，并且路由需要身份验证，这将在服务器端呈现时发送客户端 cookie，即第一个页面加载。

import fetch from "isomorphic-fetch";

static async getInitialProps(ctx) {

  let clients = await fetch(
  `
  ${API_SERVER}/client/clients`,
    ctx.req ? {
      withCredentials: true,
      headers: {
        cookie: ctx.req.headers.cookie
      }
    } : {}
  );
}

如何使用 next.js 的 getInitialProps 方法获取 cookie？

How to use method getInitialProps from next.js to get cookies?

cookies

node.js

next.js