如何在SvelteKit API中安全获取请求来源的域名？

本地测试阶段 #

本地跨域请求场景下，浏览器会自动为跨域请求添加Origin请求头，这个头无法被前端篡改（浏览器会强制校验）。你当前只拿到referer，可能是请求配置或场景问题，建议修改代码优先读取Origin：

export async function GET({ request, params, fetch }) {
  const headers = request.headers
  // 优先用Origin头，比Referer更可靠
  const origin = headers.get('Origin') || headers.get('referer')
  console.log(origin)

  ...
}

生产环境（Caddy反向代理） #

部署后，后端直接读取Origin会拿到Caddy代理的地址，需要配置Caddy传递客户端真实的源信息：

1. 在Caddyfile中添加头传递配置，保留客户端原始请求头，还可自定义兜底头：

your-domain.com {
  reverse_proxy localhost:5002 {
    header_up Origin {http.request.header.Origin}
    header_up Referer {http.request.header.Referer}
    // 可选：添加自定义头，后端优先读取这个更安全
    header_up X-Forwarded-Origin {http.request.header.Origin}
  }
}

2. 修改SvelteKit API代码，优先读取自定义代理头：

export async function GET({ request, params, fetch }) {
  const headers = request.headers
  const origin = headers.get('X-Forwarded-Origin') || headers.get('Origin') || headers.get('referer')
  console.log(origin)

  ...
}

核心注意事项 #

• Origin是跨域场景下最可靠的源标识，前端无法篡改，同域请求时可能不存在，此时再 fallback 到Referer。
• 必须确保Caddy正确传递客户端原始请求头，避免后端拿到代理服务器的地址。
• Referer容易被篡改或因浏览器隐私设置被屏蔽，仅适合作为最后的兜底方案。

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