how to fetch headers in middleware in Next js

Question

In below NextJS code how can i access Authorization in middleware when client component call API every time api is call it show empty headers in middleware can some on explain it

Client Component:-

'use client'

import { useEffect } from "react";

export default function Page(){
    useEffect(()=>{
        const data = async () => {
            const log  = localStorage.getItem("login");
            let usr = await fetch("http://localhost:3000/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:-

import { NextResponse } from "next/server";

export function GET(request){
    return NextResponse.json({msg: "Api Call"});

}

Middleware :-

const { NextResponse } = require("next/server");

export function middleware(request){
    const head = request.headers;
    console.log(head);
    
}

export const config = {
    matcher: ["/login"],
}

Mahmoud Zenhom · Accepted Answer · 2025-01-04 23:50:46Z

0

You can access the authorization at your middleware like this :

const authHeader = request.headers.get("authorization");
console.log("Authorization Header:", authHeader);

answered Jan 4 at 23:50

Mahmoud Zenhom

664 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to fetch headers in middleware in Next js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related