如何在SvelteKit中通过顶级域名设置全局变量？

1. 服务端通过主机名推断国家并传递给页面 #

在根布局的服务端load函数中解析请求主机名，映射对应的国家代码，同时将其存入locals供API路由使用：

// src/routes/+layout.server.ts
export async function load({ request }) {
  const hostname = request.headers.get('host') || '';
  // 按实际域名规则配置映射关系
  const countryMap: Record<string, string> = {
    'example.com': 'us',
    'example.co.uk': 'uk'
  };
  const country = countryMap[hostname] || 'default';
  
  return { country };
}

在根布局组件中，通过setContext将国家代码全局传递给子组件：

<!-- src/routes/+layout.svelte -->
<script>
  export let data;
  import { setContext } from 'svelte';
  setContext('country', data.country);
</script>

<slot />

2. 客户端统一封装带国家参数的API请求 #

创建全局API工具函数，自动从上下文或页面数据中获取国家参数并添加到请求：

// src/lib/api.ts
import { getContext } from 'svelte';
import { page } from '$app/stores';

export async function fetchWithCountry(url: string, options: RequestInit = {}) {
  let country;
  try {
    // 优先从组件上下文获取
    country = getContext('country');
  } catch {
    // 非组件环境从page store读取
    country = $page.data.country;
  }

  const urlObj = new URL(url, import.meta.env.VITE_API_BASE_URL);
  urlObj.searchParams.set('country', country);

  return fetch(urlObj.toString(), options);
}

3. API路由直接从locals读取国家参数 #

通过hooks.server.ts将国家代码注入locals，API路由即可直接使用：

// src/hooks.server.ts
export async function handle({ event, resolve }) {
  const hostname = event.request.headers.get('host') || '';
  const countryMap: Record<string, string> = {
    'example.com': 'us',
    'example.co.uk': 'uk'
  };
  event.locals.country = countryMap[hostname] || 'default';

  const response = await resolve(event);
  return response;
}

API路由示例：

// src/routes/api/+server.ts
export async function GET({ locals }) {
  // 直接使用locals中的国家参数请求后端
  const backendResponse = await fetch(`https://your-backend/api?country=${locals.country}`);
  const data = await backendResponse.json();
  
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  });
}

4. 开发环境模拟多域名 #

修改本地hosts文件添加域名映射：

127.0.0.1 example.com
127.0.0.1 example.co.uk

启动开发服务时指定端口：

npm run dev -- --port 3000

即可在本地模拟多域名环境测试。

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