Can't access cookies inside route, but can access cookies inside middleware.
Unanswered
Japanese cockle posted this in #help-forum

Japanese cockleOP
I'm trying to access cookies using next/headers inside my api route, but I can't seem to get it to work. However, when I try to use the same function in the middleware, it does seem to work.
41 Replies

Australian Freshwater Crocodile
When you end your LoL game share some code please XD

Australian Freshwater Crocodile
What operation are you trying to do?
cookies and headers are accessible in middleware because this runs before every page request, so it has access to the header and cookies from the client.
You can access cookies and headers in server components too, but they need to become dynamic; cookies, headers (and others) are now async therefore now you need to await them.
cookies and headers are accessible in middleware because this runs before every page request, so it has access to the header and cookies from the client.
You can access cookies and headers in server components too, but they need to become dynamic; cookies, headers (and others) are now async therefore now you need to await them.

not disrupting other people in a game, respect 🤝

Japanese cockleOP
when I use next.js next/headers to get cookies from an api route that I call using fetch from the client, I get the value, but when I attempt to get cookies from an api route that I call using fetch from middleware, I don't get the cookies. Am I missing something?
cookies.get(accessTokenKey)?.value;
it isn't a server component
it's an actual api route
i.e
export async function POST(request) {
// ... get cookies
}
I'm just trying to read them
I guess it's just weird that they are showing ON THE API ROUTE for a
fetch
from the client vs a fetch
from the middleware
Japanese cockleOP
The docs seem to imply that maybe the cookies shouldn't be populated that way AT ALL????

Australian Freshwater Crocodile
Tell me if I get what is happening:
- (works✅) you tried to read cookies INSIDE an API route, this route.ts gets called by the client
- (❌fails) you tried to read cookies in the SAME API route, but when this route.ts gets called by the middleware it doesn’t work?
- (works✅) you tried to read cookies INSIDE an API route, this route.ts gets called by the client
- (❌fails) you tried to read cookies in the SAME API route, but when this route.ts gets called by the middleware it doesn’t work?

Japanese cockleOP
yea
exactly
but I tried to read with next/headers rather than request.whatever whatever

Australian Freshwater Crocodile
Have you tried reading from request.cookies.get("cookie-whatever")?
Also, what happens if you read and cookies in the middleware itself? Does that work?
If that works , maybe try appending the cookies explicitly in the fetch call.
If neither work then I have no idea, and you should go back to LoL to forget about it and I should apologize for wasting your time xd
If that works , maybe try appending the cookies explicitly in the fetch call.
If neither work then I have no idea, and you should go back to LoL to forget about it and I should apologize for wasting your time xd

Japanese cockleOP
I have, and reading in the middleware works yes
just trying to understand the why though
it makes no sense xD

Australian Freshwater Crocodile
Middleware intercepts the request
It might as well reset it or mutate it. what If you read the cookies from the incoming request and then pass them to the route handler explicitly?

Japanese cockleOP
It's interesting that in the non-middleware case, request.headers.cookie is empty
or wait
what
const headers = request.headers;
console.log('here', headers);
this prints the full request object headers
and I see my cookies
but when I do
console.log(headers.cookie)
it is undefined😕

makes no sense

Japanese cockleOP
I think I'm just in a weird state of undefined behavior
I made the false assumption that next/headers worked on the API side
and it kinda does????...
I can set cookies
but it seems like reading them that way is not okay
so it sounds like I should stop using next/headers in the API routes entirely and then revisit this problem
😆

Australian Freshwater Crocodile
try this : const requestHeaders = new Headers(request.headers)
and console.log(requestHeaders)