I am using nextjs server side apis to send external api calls. Using Axios as the httpClient. Not matter what i do, I can find no successful way to remove all cookies from my API calls which don't need cookies. They need to be removed because now the cookies in users browsers are bloating and causing problems on the calls.
Here is what I am doing:
export const queryData = (caller: string, enabled = true) => {
return useQuery(
['queryData ', caller],
async () => {
const { data } = await httpClient.get('/api/proxy/getData'{
headers: {
'Cookie': "cookiename=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
}
});
return data;
},
{ ...useQueryOptions, enabled }
);
};
then in the next.config.js, I am sending any calls to /api/proxy/* to the appropriate external api gateway, as in
module.exports = (phase) => {
return {
async rewrites() {
return [
{
source: `/api/proxy/:path*`,
destination: `${externalApiGatewayUrl}/:path*`
}
];
},
The calls all flow through correctly and have the proper query params and headers, but unfortunately, I can't figure out how to get the cookies only removed from the call.
I tried the above 'Cookie': "cookiename=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;" and it doesn't work to remove the cookies. I get the following error in the console:
Refused to set unsafe header "Cookie"
Does anyone have an actual working example of properly removing cookies from Nextjs server side API calls to external APIs?
I only need to (or want to) do this on these server side calls to external APIs. NextJS examples would be helpful. General javascript isn't helpful if it is not within the context of NextJS.
Just set the expires parameter to a past date: document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";