Firefox中SvelteKit页面关闭时如何成功发送HTTP DELETE请求？

问题原因 #

你之前的实现依赖unload事件发送请求，但现代浏览器（包括Firefox 116.0.3）对unload事件中的异步请求限制严格，即便设置了keepalive: true，浏览器也可能在请求完成前终止页面进程，导致请求无法触发后端接口。

方案1：改用pagehide事件 + 带keepalive的fetch #

pagehide事件是浏览器推荐的页面卸载监听事件，比unload更可靠。修改+page.svelte代码如下：

<script>
    import { onMount } from 'svelte';

    onMount(() => {
        const handlePageUnload = async () => {
            try {
                await fetch('/', {
                    method: 'DELETE',
                    keepalive: true,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
            } catch (err) {
                console.error('请求发送失败:', err);
            }
        };

        window.addEventListener('pagehide', handlePageUnload);

        // 组件销毁时移除监听，避免内存泄漏
        return () => {
            window.removeEventListener('pagehide', handlePageUnload);
        };
    });
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>

方案2：使用navigator.sendBeacon（更稳定） #

navigator.sendBeacon是浏览器专门为页面卸载场景设计的API，能确保请求被异步发送且不会被页面终止打断。如果后端可以兼容POST请求处理删除逻辑，推荐此方案：

1. 修改+page.svelte：

<script>
    import { onMount } from 'svelte';

    onMount(() => {
        const handlePageUnload = () => {
            // 构造请求数据（无数据时可传空Blob）
            const requestData = new Blob([JSON.stringify({})], { type: 'application/json' });
            navigator.sendBeacon('/', requestData);
        };

        window.addEventListener('pagehide', handlePageUnload);

        return () => {
            window.removeEventListener('pagehide', handlePageUnload);
        };
    });
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>

2. 修改+server.ts新增POST处理（和DELETE逻辑复用即可）：

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

export function DELETE(){
    console.log('delete');
    return json({message: 'delete'})
}

// 新增POST接口处理卸载请求
export async function POST() {
    console.log('delete via POST');
    // 复用DELETE的业务逻辑
    return json({message: 'delete via POST'})
}

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