时间戳

首页 > 解决方案 > NextJS - 从 getInitialProps 向 API 服务器发送 cookie

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

问题描述

我使用 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

标签： node.jslaravelcookiesnext.jsserver-side-rendering

解决方案

正如您正确解释的那样， Next是在client & on servergetInitialProps上调用的。

如果您的 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 放在客户端发出的所有请求上。

推荐阅读