Svelte中调用本地端点遇fetch相对URL报错，求助解决方案

这个错误是因为在服务器端上下文中使用全局fetch处理相对URL时，缺少请求上下文导致的。即便你的代码是在客户端点击事件中调用，若addLog函数被服务器端代码（比如SSR的load函数、server路由）引用执行，或SvelteKit环境检测异常，就会触发该错误。以下是两种可行的解决办法：

方案1：限制函数仅在客户端执行 #

如果addLog只需要在客户端调用，直接在函数开头添加环境检测，确保仅在浏览器环境中运行：

// lib/addLog.ts
export const addLog = async (userId) => {
    // 检查是否处于客户端环境
    if (typeof window === 'undefined') {
        throw new Error('addLog 仅支持在客户端调用');
    }

    const response = await fetch('/remote/log', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          'logData': {uid: userId}
        }),
      });

      const jResp = await response.json();
      console.log(jResp);
}

方案2：兼容客户端和服务器端（推荐） #

让addLog函数接收一个fetch实例作为参数，客户端调用时用全局fetch，服务器端调用时传入event.fetch（比如load函数、server路由中）：

// lib/addLog.ts
export const addLog = async (userId, fetchFn = fetch) => {
    const response = await fetchFn('/remote/log', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          'logData': {uid: userId}
        }),
      });

      const jResp = await response.json();
      console.log(jResp);
}

客户端调用（无需修改现有代码） #

<!-- routes/+page.svelte -->
<script>
import { addLog } from '../lib/addLog';

const userId = 'ai5jkha788sd9';
const addLogOnClick = async () => { await addLog(userId) };
</script>

<main>
    <button on:click={addLogOnClick}>Add user</button>
</main>

服务器端调用示例（比如在load函数中） #

// routes/+page.server.js
import { addLog } from '$lib/addLog';

export async function load({ fetch }) {
    // 传入server端的event.fetch
    await addLog('server-side-user-id', fetch);
    return {};
}

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