SvelteKit服务端函数中redirect跳转不生效问题排查

我有一个Svelte的Header组件，其中包含一个logout按钮。点击按钮会调用前端函数，该函数请求服务端的/api/user-logout接口，但服务端函数中的redirect语句无法实现跳转。

组件代码 #

<script>
    /**
     * Logs out the current user.
     * @returns {Promise<void>}
     */
    const logout = async () => {
        // call to internal API to perform logout.
        const response = await fetch("/api/user-logout", {
            method: "POST",
        });
    }
</script>

<header>
<!-- Logout -->
            <div class="tooltip tooltip-left" data-tip="Log out">
                <button
                        on:click={logout}
                        class="relative p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:bg-gray-100 focus:text-gray-600 rounded-full"
                >
                    <span class="sr-only">Log out</span>
                    <svg aria-hidden="true" class="h-6 w-6" fill="none" stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke-linecap="round" stroke-linejoin="round"
                              stroke-width="2"/>
                    </svg>
                </button>
            </div>
</header>

服务端代码（api/user-logout/+server.js） #

import { redirect } from "@sveltejs/kit";

export async function POST({ request, fetch, cookies, event}) {
    // remove the auth cookie.
    // cookies.delete(AUTH_TOKEN_KEY, { path: '/' });

    // redirect user to login page.
    throw redirect(302, '/login');
}

已确认服务端函数已被触发（添加日志可正常打印），但跳转始终不生效。我使用的是SvelteKit 2.5，也尝试过直接使用redirect(302, '/login')，仍无效。

目前通过让服务端返回响应，前端用goto("/login")实现了跳转，但希望直接通过服务端的redirect完成，请问问题出在哪里？

为什么服务端redirect不生效？ #

你用fetch发起的是AJAX异步请求，浏览器对这类请求的重定向响应只会在请求层面跟进——也就是fetch会拿到重定向目标页面的内容，但不会主动触发浏览器的页面跳转，这是AJAX请求的默认行为，和SvelteKit本身无关。

SvelteKit的redirect函数本质是抛出一个带重定向信息的错误，服务端会返回3xx状态码和Location头，但这个响应只会被fetch接收，没法直接让浏览器跳转到目标页。

可行的解决办法 #

1. 改用表单提交（推荐）

把按钮改成表单提交按钮，直接提交到/api/user-logout接口，浏览器会自动处理服务端的重定向：

<form method="POST" action="/api/user-logout">
    <div class="tooltip tooltip-left" data-tip="Log out">
        <button type="submit" class="relative p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:bg-gray-100 focus:text-gray-600 rounded-full">
            <span class="sr-only">Log out</span>
            <svg aria-hidden="true" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
    </div>
</form>

这种方式完全不需要前端额外处理，浏览器会自动响应服务端的重定向指令跳转到登录页。

2. 前端手动处理重定向（保留AJAX场景）

如果必须用fetch（比如需要执行额外前端逻辑），可以在拿到响应后手动检查重定向状态，再用goto跳转：

import { goto } from '$app/navigation';

const logout = async () => {
    const response = await fetch("/api/user-logout", {
        method: "POST",
        // 禁用fetch自动跟进重定向，获取原始响应
        redirect: 'manual'
    });

    if (response.redirected || response.status >= 300 && response.status < 400) {
        await goto('/login');
    }
}

不过这种方式和你当前的实现逻辑本质一致，只是更规范地处理了重定向响应。

总结 #

服务端redirect在AJAX请求场景下无法直接触发页面跳转，这是浏览器的固有机制。如果想完全通过服务端控制跳转，表单提交是最直接的方案；如果要保留AJAX请求，就必须在前端手动处理跳转逻辑。

内容的提问来源于stack exchange，提问作者MrCujo