NextJS - 从 getInitialProps 向 API 服务器发送 cookie

Question

我使用 NextJS 作为客户端存储库来与我的后端 API 服务器 (laravel) 通信。身份验证是通过存储在 cookie 中的 JWT 完成的。当我向 发送身份验证请求时https://my-backend-server.com/api/login，这一切都可以无缝运行，因为我用 cookie 进行响应，并设置为 my-backend-server.com 域。甚至当我从浏览器发送请求时。

当我想加载页面并从 getInitialProps 发送请求时出现问题，因为这是一个服务器端调用。我如何能够访问 cookiemy-backend-server.com并将其放入标头中，以便正确授权来自 NextJS 的服务器端请求？

大多数答案都说了一些关于req.cookiesor 的内容req.headers.cookies，但是这是空的，因为 getInitialProps 中的请求是http://my-local-clientside-site.com

Answer 1

正如您正确解释的那样， NextgetInitialProps在client和server上被调用。

如果您的 Next app 和 Api 服务是从同一个域提供的，您的 Api 服务可以将 cookie 放在域中，并且它将在客户端（浏览器）上工作。

每当您的 Next 应用从服务器端访问 api 时，您都需要自己附加 cookie。

getInitialProps服务器端的方法req从浏览器获取请求（as ）的上下文（第一个参数），这意味着该请求具有cookie。

如果你有一个自定义服务器，你可能需要添加一个cookieParser，

// server.js

import cookieParser from 'cookie-parser';
import express from 'express';
import next from 'next';

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
app.prepare().then(() => {
  const nextHandler = app.getRequestHandler();

  const server = express();

  server.use(cookieParser());
  // -----------^

  server.get('*', (req, res) => nextHandler(req, res));
});

此解析器将解析Cookie标头并将其作为对象放在req.

之后，您req.cookie应该拥有 cookie 值（确保您看到浏览器在文档请求中发送了它），您可以在您的getInitialProps,

//pages/index.js

const IndexPage = () => <div>BLA</div>

IndexPage.getInitialProps = (context) => {
  if(context.req) {
    // it runs on server side
    axios.defaults.headers.get.Cookie = context.req.headers.cookie;
  }
};

我给了你一个例子，它设置 axios 将 cookie 放在将从客户端发出的所有请求上。