如何在Heroku上强制SvelteKit应用重定向至HTTPS

要实现强制从HTTP跳转至HTTPS，你可以利用SvelteKit的服务器端Hooks拦截所有请求，结合Heroku提供的请求头判断原始协议，具体步骤如下：

1. 创建服务器端Hook文件 #

在项目的src目录下创建hooks.server.js（若使用TypeScript则创建hooks.server.ts），写入以下代码：

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
  // 仅在生产环境执行重定向逻辑
  if (import.meta.env.PROD) {
    // 通过Heroku的X-Forwarded-Proto头获取原始请求协议
    const protocol = event.request.headers.get('x-forwarded-proto');
    
    if (protocol === 'http') {
      // 构造HTTPS目标URL
      const url = new URL(event.request.url);
      url.protocol = 'https:';
      
      // 返回301永久重定向（对SEO友好）
      return new Response(null, {
        status: 301,
        headers: {
          Location: url.toString()
        }
      });
    }
  }

  // 协议符合要求，正常处理请求
  return resolve(event);
}

关键说明 #

• Heroku反向代理特性：Heroku会将原始请求的协议通过X-Forwarded-Proto请求头传递给应用，因此不能直接用event.request.url中的协议字段判断，必须依赖这个请求头。
• 环境判断：通过import.meta.env.PROD确保重定向逻辑仅在生产环境生效，避免本地开发时出现跳转循环。
• 重定向状态码：使用301永久重定向，告知搜索引擎和浏览器地址已永久迁移至HTTPS，若需临时跳转可改为302。

内容的提问来源于stack exchange，提问作者Valentin Trinqué