How to send cookies and headers in app dir

Hello. I have an index page in the pages directory. I want to do the same thing but using the app dir
const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => {
const { data } = useSwr(
`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,
fetcher,
{ fallbackData }
);

if (data) {
return <div>Welcome! {JSON.stringify(data.name)}</div>;
}

return <div className="">{JSON.stringify(fallbackData)}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
console.log({ header: context.req.headers });

const data = await fetcher(
`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`, {
...context.req.headers,
}
);
return { props: { fallbackData: data } };
};
const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => {
const { data } = useSwr(
`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,
fetcher,
{ fallbackData }
);

if (data) {
return <div>Welcome! {JSON.stringify(data.name)}</div>;
}

return <div className="">{JSON.stringify(fallbackData)}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
console.log({ header: context.req.headers });

const data = await fetcher(
`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`, {
...context.req.headers,
}
);
return { props: { fallbackData: data } };
};
Basically, I'm sending a request to an express server. Which verifies the user using their access/refresh token gotten from the request cookies/header. I want to do the same in in appdir. I tried this:
async function getUser(){
const data = await fetcher(`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`);
//@ts-ignore
return data | "no-data"
}

export default async function Home() {
const data = await getUser()
return (
<p>Welcome {data.name}</p>
)
}
async function getUser(){
const data = await fetcher(`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`);
//@ts-ignore
return data | "no-data"
}

export default async function Home() {
const data = await getUser()
return (
<p>Welcome {data.name}</p>
)
}
But it doesn't send the cookies/headers to the server. For context. fetcher is just an axios call to get data
import axios from "axios";

const fetcher = async <T>(url: string, headers = {}): Promise<T | null> => {
try {
const { data } = await axios.get<T>(url, {
headers,
withCredentials: true,
});

return data;
} catch (e) {
return null;
}
};

export default fetcher;
import axios from "axios";

const fetcher = async <T>(url: string, headers = {}): Promise<T | null> => {
try {
const { data } = await axios.get<T>(url, {
headers,
withCredentials: true,
});

return data;
} catch (e) {
return null;
}
};

export default fetcher;
3 Replies
cornflour
cornflour2y ago
from my understanding, you are trying to take the header sent from the client to send to the remote server. If so, you can use the cookies() and headers() methods from next/headers to get cookies and headers respectively
import { cookies, headers } from 'next/headers'
const Home = async () => {
const myCookie = cookies().get('my-cookie-key')
const headers = headers()
const response = await getUser(myCookies, headers) // do whatever here
return <>...</>
}
import { cookies, headers } from 'next/headers'
const Home = async () => {
const myCookie = cookies().get('my-cookie-key')
const headers = headers()
const response = await getUser(myCookies, headers) // do whatever here
return <>...</>
}
related docs https://nextjs.org/docs/app/api-reference/functions/headers#headers https://nextjs.org/docs/app/api-reference/functions/cookies
Complexlity
Complexlity17mo ago
Not exactly. So I could access the headers in the getUser function. My issue now is, I'm trying to send a fetch request to my express server with the headers. But when I send the fetch request, I doesn't have the headers for some reason
async function getUser() {
const headersList = headers()
console.log(headersList)

const url = `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`;
const data = await fetch(url, {
headersList,
credentials: 'include'
})
//@ts-ignore
return data | "no-data"
}
async function getUser() {
const headersList = headers()
console.log(headersList)

const url = `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`;
const data = await fetch(url, {
headersList,
credentials: 'include'
})
//@ts-ignore
return data | "no-data"
}
Complexlity
Complexlity17mo ago
I found out the solution
Want results from more Discord servers?
Add your server