NextJS middleware中fetch无法携带Cookie问题咨询

Next.js Middleware 原生支持fetch调用，你遇到的Cookie读取失败问题和fetch支持性无关，是请求上下文隔离导致的。

• Middleware运行在Edge Runtime环境，不是浏览器上下文，你给fetch加的credentials: "include"是浏览器专属配置，在服务端/Edge环境下不会生效，不会自动携带当前用户请求的Cookie。
• 你在Middleware里通过origin + 接口路径发起的fetch是独立的服务端请求，和用户发起的原始访问请求上下文完全隔离，默认不会继承原始请求的Cookie、自定义请求头等信息，所以你的鉴权接口拿不到登录态，返回空对象。
• 你在浏览器控制台发同地址请求能拿到正确结果，是因为浏览器发请求时会自动携带当前站点下存储的所有Cookie，和Middleware里的服务端请求逻辑完全不同。

两种方案可选：

1. 手动透传Cookie（快速修复）
   如果你暂时不想重构鉴权逻辑，直接把原始请求里的Cookie手动塞到fetch的请求头里即可，参考代码：

   import { NextRequest, NextResponse } from "next/server";
   
   export async function middleware(req: NextRequest) {
     const { origin, pathname } = req.nextUrl;
   
     if (pathname.startsWith("/internal")) {
       const authCookie = req.cookies.get("krl_auth_cookie");
       // 手动透传Cookie到内部请求
       const res = await fetch(`${origin}/api/auth/user/get`, {
         headers: {
           Cookie: authCookie ? `krl_auth_cookie=${authCookie.value}` : ""
         }
       });
       const data = await res.json();
       
       // 补充鉴权失败的拦截逻辑，比如未登录跳转
       if (!data?.hasPermission) {
         return NextResponse.redirect(new URL("/login", req.url));
       }
     }
   
     if (pathname.includes("_next")) {
       return NextResponse.next();
     }
   
     return NextResponse.next();
   }
   

2. 抽离公共鉴权逻辑（推荐方案）
   不要在Middleware里请求自己站点的/api接口，这类内部请求会增加额外的性能开销，处理不当还会触发循环调用。你可以把/api/auth/user/get里的鉴权校验逻辑抽成可复用的公共方法，直接在Middleware里导入调用，省掉一次内部HTTP请求的成本，逻辑也更可控。

• Edge Runtime的fetch实现和浏览器端fetch存在差异，不要直接照搬浏览器端的fetch配置，类似credentials、window相关的配置/对象在Edge环境下都无法使用。
• 如果使用Next.js 13+版本，Middleware里不要依赖Node.js原生模块（比如fs、path），Edge Runtime不支持这类API，会直接抛出运行错误。

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