Question

我遇到了next.js的问题

当我从async static getInitialProps提出请求时，我无法获取Cookie。我得到undefined

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

中得到它

这里我已经尝试过没有成功：

＆＃13;

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

＆＃13;

有什么建议吗？

Answer 1

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

您可以通过测试options.req的存在来判断它是否在客户端与服务器上运行：

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？

2 个答案: