SvelteKit 2.5.4中FETCH后服务端文件重复执行且Cookie丢失问题

原因分析 #

1. Fetch请求的CORS配置错误
   你在请求头中添加了"Access-Control-Allow-Origin": "*"，但这个头是服务器返回给客户端的响应头，并非客户端请求时需要携带的字段。客户端发送这个无效头会导致请求异常，进而触发页面状态混乱，让SvelteKit重新执行+layout.server.ts和+page.server.ts的load函数。
2. 跨域Fetch未携带Cookie
   你的Fetch目标地址localhost:8000和SvelteKit开发服务器（通常为localhost:5173）属于跨域，默认情况下fetch不会自动携带Cookie到跨域地址。当SvelteKit的load函数被重新触发时，新请求未携带DEBUG Cookie，因此服务器端读取到的值为undefined。
3. 未处理Fetch请求错误
   如果Fetch请求因CORS或其他原因失败，未捕获的异常可能导致页面意外触发数据重新验证，最终让load函数重复执行两次。

解决方案 #

1. 修正Fetch请求代码 #

移除无效请求头，添加跨域携带Cookie的配置，并增加错误处理逻辑：

async function query(){
    let access_token = "SSSLOJGGTFGHKLNOKJVUBI";
    try {
        const response = await fetch("http://localhost:8000/v1/apples/get-apple/", {
            method: 'GET',
            headers: {
                "Content-Type": "application/json", 
                "Authorization": `Bearer ${access_token}`
            },
            credentials: 'include', // 允许跨域携带Cookie
            body: null
        });

        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }

        console.log(await response.json());
    } catch (err) {
        console.error('请求出错：', err);
        // 可在此添加前端错误提示，避免异常扩散
    }
}

2. 配置目标服务器的CORS规则 #

在localhost:8000的服务器中设置正确的CORS响应头：

• Access-Control-Allow-Origin: http://localhost:5173（指定你的SvelteKit开发域名，不能用*，否则无法携带Cookie）
• Access-Control-Allow-Credentials: true（允许跨域携带Cookie）
• 明确允许请求中携带的头，比如Authorization、Content-Type

3. 确认Cookie的有效性 #

• 在浏览器开发者工具的Application > Cookies中，检查DEBUG Cookie是否存在，路径是否为/
• 在Network面板中查看Fetch请求的Cookie请求头，确认是否携带了DEBUG值

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