Objective: The Goal: Clicking a button on a page should send a request to the controller. The controller will then set a cookie, and upon receiving the response, redirect the page to another page, such as the about page.
Directly Calling API route from the browser: Using this code, I can access the api route directly from the browser as expected.
However, when trying to implement the same process with a button click, the cookies are set but the redirection to the about page does not occur, resulting in a 307 Response error.
My API is hosted on the same server using Next.js.
I could use a router to implement this, but I prefer to utilize response header redirect. What am I missing here? Thank you.
// home.tsx
'use client';
export default function Home() {
const handleSet = () => {
(async () => {
await fetch('http://localhost:3000/api/test-path');
})();
};
return (
<main className="min-h-screen">
<p>Home page</p>
<button className="btn btn-primary" onClick={handleSet}>
Set cookies
</button>
</main>
);
}