'NextJS middleware can fetch httpOnly cookies only during development?

When Using the NextJS _middleware.js cookie is fetched by it during development in localhost, but as soon as I deploy onto vercel it stops fetching the cookie. The Cookie is httpOnly and the cookie is present on the website but is not being fetched by the middleware in production. Here is my middleware code

import { NextResponse } from "next/server";

export async function middleware(req) {
    let token = req.cookies["refreshToken"];
    console.log(token);

    const { origin } = req.nextUrl

    const url = req.url

    if (url.includes('/profile') && !token) {
        return NextResponse.redirect(`${origin}/`)
    }

    if (token && url.includes('/profile')) {
        return NextResponse.next()
    }

}

Any Suggestions? or does it not work cross site ?, but I am able to store the cookie, keep that in mind.



Solution 1:[1]

It might be a cross-site request issue. If your backend is hosted on a different domain and you set the cookie with the SameSite attribute set to lax or strict, your frontend code won't have access to it (see MDN).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paul Kuhle