Despite my efforts, I have been unable to successfully remove cookies from my API calls in NextJS using Axios as the httpClient. The accumulation of cookies in users' browsers is causing issues and bloating, but I can't seem to find a solution.
Here is an example of what I am attempting:
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 }
);
};
In the next.config.js, I am rerouting calls to /api/proxy/* to the appropriate external api gateway like so:
module.exports = (phase) => {
return {
async rewrites() {
return [
{
source: `/api/proxy/:path*`,
destination: `${externalApiGatewayUrl}/:path*`
}
];
},
All calls are being made correctly with the necessary query parameters and headers, but removing cookies specifically remains a challenge.
I attempted the code snippet
'Cookie': "cookiename=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"Refused to set unsafe header "Cookie"
If anyone has a working example of how to properly remove cookies from NextJS server side API calls to external APIs, it would be greatly appreciated. Specifically, examples within the context of NextJS would be most helpful, as general JavaScript solutions do not apply here.