Next.js中间件中如何获取请求头？Authorization为空问题解析

问题根源 #

1. 中间件路径匹配错误：你的中间件仅配置匹配/login路径，但客户端实际调用的是/api/route接口，中间件根本不会拦截这个API请求，自然拿不到请求头。
2. Headers对象获取方式有误：直接打印request.headers（这是一个Headers实例对象）无法看到具体的头字段值，需要用get()方法精准获取指定头。

解决方案 #

1. 修改中间件的匹配规则

将中间件的matcher配置改为包含目标API路径，比如匹配所有API请求：

import { NextResponse } from "next/server";

export function middleware(request) {
  // 正确获取Authorization头
  const authHeader = request.headers.get('Authorization');
  console.log('Authorization:', authHeader);

  // 可选：添加权限验证逻辑
  if (!authHeader) {
    return NextResponse.json({ error: '未授权' }, { status: 401 });
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/api/:path*"], // 匹配所有API路径，也可以精确写为["/api/route"]
};

2. 确认客户端请求的有效性

在客户端组件的fetch请求前，先校验localStorage中的令牌是否存在：

'use client'
import { useEffect } from "react";

export default function Page(){
    useEffect(()=>{
        const data = async () => {
            const log  = localStorage.getItem("login");
            // 先确认令牌是否存在
            console.log('Authorization令牌:', log);
            if (!log) {
                console.log('未找到登录令牌');
                return;
            }
            let usr = await fetch("/api/route",{ // 同域请求可省略完整域名
                method: "GET",
                headers:{
                    "Content-Type": "application/json",
                    "Authorization": log
                } 
            });
            usr = await usr.json();
            console.log(usr);
        }
        data();
    },[]);
    return(
        <div>
            <h1>Login Middleware</h1>
        </div>
    );
}

额外注意 #

• 同域请求无需写完整域名，直接用/api/route即可，避免不必要的跨域问题。
• 确保localStorage中的login值格式符合认证要求（通常是Bearer xxx格式，具体根据你的业务逻辑调整）。

内容的提问来源于stack exchange，提问作者GAMING WARRIOR