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

Question

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

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

大多数答案都提到了有关 req.cookies 或 req.headers.cookies 的内容，但是这是空的，因为 getInitialProps 中的请求是 http://my-local-clientside-site.com

Answer 1

正如您所解释的正确，Next 的 getInitialProps 在客户端和服务器上调用。

如果您的 Next 应用和 Api 服务是从同一域提供服务的，您的 Api 服务可以将 Cookie 放在该域上，并且它将在客户端(浏览器)上运行。

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

服务器端的 getInitialProps方法从浏览器获取请求(如 req)的上下文(第一个参数)，这意味着该请求具有 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 header 并将其作为对象放在 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 放置在客户端发出的所有请求上。