Next.js 中间件设置 Axios 标头答案

【问题标题】：Next.js middleware to set Axios headerNext.js 中间件设置 Axios 标头
【发布时间】：2022-10-05 22:06:48
【问题描述】：

我正在尝试使用 Next 12 将 Authorization 标头添加到带有中间件的 Axios 实例中。但是，看起来标头实际上并没有被传递到getServerSideProps 内的请求中，我不知道为什么。

这是我的中间件的样子：

import { Client } from \'lib/api/config\';
import { AUTH } from \'modules/auth/api/endpoints\';
import { NextRequest, NextResponse } from \'next/server\';
import { API_ROOT_URL, AUTH_TOKEN_COOKIE_KEY } from \'utils/constants/constants\';

const middleware = async (req: NextRequest) => {
  const token = req.cookies[AUTH_TOKEN_COOKIE_KEY];
  const url = req.nextUrl.clone();

  const response = await fetch(`${API_ROOT_URL}${AUTH.validateToken}`, {
    method: \'POST\',
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  const data = await response.json();

  if (data.statusCode !== 200 && !url.pathname.includes(\'/login\')) {
    url.pathname = \'/login\';
    return NextResponse.redirect(url);
  } else {
    Client.defaults.headers[\'Authorization\'] = `Bearer ${token}`;
  }
};

export default middleware;

如您所见，我将令牌存储在 cookie 中，在发出请求时从 req.cookies 属性获取令牌，验证令牌，如果它有效，我将其添加到 @987654326 @。但是，如果我向路由发出请求，我会收到 403 错误，提示找不到 auth 标头。有什么我需要改变才能让这一切顺利进行吗？

另一方面，我们正在使用 WordPress REST API，以及用于 JWT 身份验证的此插件：

https://wordpress.org/plugins/jwt-auth/#description

标签： next.js jwt middleware

【解决方案1】：

在 nextjs 中，所有 api 的东西都在 pages/api 文件夹中完成，而且非常严格。

【讨论】：