token with fetch not working?
Unanswered
tensefrogomar posted this in #help-forum
Hey guys i hope you are doing okay !
I'm moving my call with a token from an client component that use axios , to a call with a token from a SERVER component that use fetch !
The problem is that my backend use to do the work for setting the token for me in my cookies & i just had to sent it back with axios using ' withCredentials: true,'
But now i'm struggling, i get the felling that since i now use a server component, my expressjs is not able to save the token in my cookies
So , I managed to catch the token during the login call (from nexjts) and save it in the cookies
But now i'm not able to send my token back to expressjs ?! i don't know why !
If some one has a tutorial please ?! I'm struggling ?
Or at least if someone can tell me if it's possible or not x)
Thanks guys for reading me !
And now it look like this but not working
for more details (cause i suspect a cors domain issue )
My nexjts is on localhost:3000
My expressjs is on localhost:3001
If someone can also help with the correct configuration of the cookies options (httpOnly, secure , samesite)
cause right now i'm at the point where i tried almost everuthing on stackoverflow, and i didn't managed to fix the issue
I'm thinking of rebooting my computer to make sure that there is no cache issue or crazy bullshit x)
Have nice day guys anyway its a pleasure talking to someone when u think u are going crazy ! ! !
I'm moving my call with a token from an client component that use axios , to a call with a token from a SERVER component that use fetch !
The problem is that my backend use to do the work for setting the token for me in my cookies & i just had to sent it back with axios using ' withCredentials: true,'
But now i'm struggling, i get the felling that since i now use a server component, my expressjs is not able to save the token in my cookies
So , I managed to catch the token during the login call (from nexjts) and save it in the cookies
But now i'm not able to send my token back to expressjs ?! i don't know why !
If some one has a tutorial please ?! I'm struggling ?
Or at least if someone can tell me if it's possible or not x)
Thanks guys for reading me !
And now it look like this but not working
for more details (cause i suspect a cors domain issue )
My nexjts is on localhost:3000
My expressjs is on localhost:3001
If someone can also help with the correct configuration of the cookies options (httpOnly, secure , samesite)
cause right now i'm at the point where i tried almost everuthing on stackoverflow, and i didn't managed to fix the issue
I'm thinking of rebooting my computer to make sure that there is no cache issue or crazy bullshit x)
Have nice day guys anyway its a pleasure talking to someone when u think u are going crazy ! ! !
5 Replies
Oak shoot sawfly
When you switch from an Axios client component to a Fetch Server Component, the environment that handles the request changes completely, which affects how cookies are managed:
Client Component (Axios): When the browser makes a request, it automatically includes any relevant cookies (like your authentication token) stored in the browser's cookie jar. withCredentials: true just ensured the browser was allowed to do this for cross-origin requests.
Server Component (Fetch): The request is now made from your Next.js server to your Express.js backend. This Next.js server environment does not automatically have access to the user's browser cookies, and it does not automatically persist cookies set by the backend.
🔑 The Core Problem
Your Express.js backend sets the token via a Set-Cookie header during login.
Your Next.js Server Component needs to read that token from the request and explicitly include it in the fetch call's headers when talking to Express.
Client Component (Axios): When the browser makes a request, it automatically includes any relevant cookies (like your authentication token) stored in the browser's cookie jar. withCredentials: true just ensured the browser was allowed to do this for cross-origin requests.
Server Component (Fetch): The request is now made from your Next.js server to your Express.js backend. This Next.js server environment does not automatically have access to the user's browser cookies, and it does not automatically persist cookies set by the backend.
🔑 The Core Problem
Your Express.js backend sets the token via a Set-Cookie header during login.
Your Next.js Server Component needs to read that token from the request and explicitly include it in the fetch call's headers when talking to Express.
// In your Server Component (e.g., app/page.js or a data fetching function)
import { cookies } from 'next/headers';
async function fetchDataFromExpress() {
// 1. READ the token from the incoming client request
const cookieStore = cookies();
const authToken = cookieStore.get('your_token_name'); // Replace 'your_token_name'
if (!authToken) {
console.log("Token not found in request cookies.");
// Handle unauthenticated state (e.g., redirect to login)
return null;
}
// 2. USE the token in the fetch request to Express
const response = await fetch('http://localhost:3001/api/data', {
method: 'GET',
headers: {
// Option 1: Set as an 'Authorization' header (Industry Standard)
'Authorization':
// OR Option 2: Manually set the Cookie header (if Express expects it this way)
// 'Cookie':
},
// Server Components don't automatically send cookies, so we pass it explicitly above
});
if (!response.ok) {
throw new Error(
}
return response.json();
}
import { cookies } from 'next/headers';
async function fetchDataFromExpress() {
// 1. READ the token from the incoming client request
const cookieStore = cookies();
const authToken = cookieStore.get('your_token_name'); // Replace 'your_token_name'
if (!authToken) {
console.log("Token not found in request cookies.");
// Handle unauthenticated state (e.g., redirect to login)
return null;
}
// 2. USE the token in the fetch request to Express
const response = await fetch('http://localhost:3001/api/data', {
method: 'GET',
headers: {
// Option 1: Set as an 'Authorization' header (Industry Standard)
'Authorization':
Bearer ${authToken.value}, // OR Option 2: Manually set the Cookie header (if Express expects it this way)
// 'Cookie':
your_token_name=${authToken.value}, },
// Server Components don't automatically send cookies, so we pass it explicitly above
});
if (!response.ok) {
throw new Error(
Express API failed: ${response.statusText});}
return response.json();
}
Hello The Puppet Master,
Thank you for your help ! ! ! ! !
I'll have a try tomorrow and let u know, my eyes can't take no more tonight x) !
Thank you for your help ! ! ! ! !
I'll have a try tomorrow and let u know, my eyes can't take no more tonight x) !
Oak shoot sawfly
🫡
@Oak shoot sawfly I love you man thanks for your help !
It works perfectly fine when i add the Header 'Cookie': your_token_name=${authToken.value} ...
Thanks for your help !!!
It works perfectly fine when i add the Header 'Cookie': your_token_name=${authToken.value} ...
Thanks for your help !!!