Перенаправление заголовка следующего ответа Js

Question

Цель:Чего я пытаюсь достичь: нажатием кнопки на странице запрос достигнет контроллера. Контроллер установит некоторые файлы cookie, когда ответ перенаправит страницу на другую страницу, скажем, о странице.

Вызов маршрута API напрямую из браузера: с этим кодом, когда я пытаюсь получить доступ к маршруту API непосредственно из браузера, он работает так, как ожидалось.

Когда я пытаюсь реализовать нажатием кнопки, он устанавливает файлы cookie, но не перенаправляется на страницу «О программе» и выдает мне ответ 307.

Мой API работает на том же сервере в следующем js.

Я могу реализовать это с помощью маршрутизатора, но хочу реализовать это через перенаправление заголовка ответа. Что я здесь делаю не так. Спасибо, как всегда.

      // 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>
    );
}`


// route.ts   file

   `import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
    const response = NextResponse.redirect(new URL('/about', new URL(request.url).origin));

    response.cookies.set({
        name: 'theme',
        value: 'dark',
        expires: new Date(2023, new Date().getMonth(), new Date().getDate(), new Date().getHours() + 3, 0, 0),
        path: '/',
        secure: true,
        httpOnly: true,
        sameSite: 'strict'
    });
    return response;
}`

Answer 1

Обработчик событий «handleSet» использует API-интерфейс выборки для выполнения запроса. API-интерфейс выборки не зависит от браузера, особенно от его документа document.location. По этой причине в браузере не будет запускаться «перенаправление». Если это желательно, это должно быть реализовано вручную.

Например:

      //[...]
await fetch(
  'http://localhost:3000/api/test-path', 
  {redirect:"manual"}
).then((response)=>{ 
  const redirectUri = response.headers.get("Location");
  //if there is a Location header, perform redirect ...
  redirectUri && document.location.href = redirectUri
});