如何在SvelteKit中获取当前页面的协议（HTTP或HTTPS）

SvelteKit默认的$page顶层属性确实没有内置protocol字段，可通过以下两种方案实现需求：

• 仅客户端侧使用
  直接调用浏览器原生API即可，注意判断运行环境避免服务端渲染时报错：

// 组件或客户端JS代码中
if (typeof window !== 'undefined') {
  const protocol = window.location.protocol;
  // 输出结果为 'http:' 或 'https:'
  console.log(protocol);
}

• 服务端/客户端通用方案
  可以在根服务端布局的load函数中从请求事件里提取协议，存入$page.data全局调用：

1. 新建/编辑项目根路径下的+layout.server.js，添加如下代码：

export function load({ url }) {
  // 入参url是完整的标准URL对象，直接取protocol属性即可
  return {
    protocol: url.protocol
  }
}

2. 任意页面、组件中直接从$page.data读取即可，服务端渲染和客户端运行场景都能正常拿到值：

import { page } from '$app/stores';

console.log($page.data.protocol);

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