SvelteKit服务器端如何获取请求的完整URL？

你遇到的问题是因为SvelteKit默认启用服务端渲染（SSR），而window对象仅存在于浏览器环境，服务端渲染阶段访问它就会抛出ReferenceError。下面是几种可行的解决办法：

方法1：利用SvelteKit的$page Store获取Origin #

SvelteKit内置的$page Store包含当前页面的完整URL信息，无论服务端还是客户端都能正常访问。

<script>
  import { page } from '$app/stores';
</script>

<svelte:head>
  <!-- 设置SEO的Hreflang标签 -->
  <link rel="alternate" hreflang="en" href="{$page.url.origin}" />
</svelte:head>

$page.url是标准的URL对象，直接读取origin属性即可得到当前站点的根URL。

方法2：仅在浏览器环境下访问window #

如果必须使用window对象，可以通过SvelteKit提供的browser变量判断当前环境：

<script>
  import { browser } from '$app/environment';
  const origin = browser ? window.location.origin : '';
</script>

<svelte:head>
  <link rel="alternate" hreflang="en" href={origin} />
</svelte:head>

注意：这种方式在服务端渲染时origin为空字符串，可能影响SEO效果，因此更推荐第一种方法。

方法3：在load函数中获取URL信息 #

可以在页面的load函数中提前获取Origin，再传递给组件使用：

首先在+page.js或+page.server.js中：

export async function load({ url }) {
  return {
    origin: url.origin
  };
}

然后在组件中接收并使用：

<script>
  export let data;
</script>

<svelte:head>
  <link rel="alternate" hreflang="en" href={data.origin} />
</svelte:head>

这种方式适合需要在服务端处理URL相关逻辑的场景。

内容的提问来源于stack exchange，提问作者Eli O.