document.referrer 经常为空是因浏览器 referrer-policy 策略限制，如 https→http 降级、meta 设置 no-referrer、隐私模式、直接输入网址等；spa 中更不更新，应优先用 utm 参数或手动存 sessionstorage 做来源追踪。
document.referrer 为什么经常是空字符串
直接读 document.referrer 得到空值，不是代码写错了，而是浏览器策略在起作用。HTTP Referer 头和这个属性一样，都受 Referrer-Policy 控制。比如从 HTTPS 页面跳到 HTTP 页面（降级），或者设置了 no-referrer 策略，document.referrer 就会被清空。Chrome、Firefox 在隐私模式下也会主动抹掉它。
常见触发空值的场景：
- 用户直接在地址栏输入网址或刷新页面（没有“上一页”）
- 从 HTTPS 跳转到 HTTP（混合内容被拦截）
- 目标页面设置了
<meta name="referrer" content="no-referrer"> - 点击书签、邮件客户端链接、某些移动端 App 内嵌 WebView
如何安全地读取并校验 referrer 值
不能假设 document.referrer 一定有内容，得先判断再用。尤其做来源统计或跳转后自动回退时，不校验会导致逻辑错乱。
推荐写法：
const referrer = document.referrer.trim();
if (referrer && !referrer.startsWith('about:') && !referrer.startsWith('blob:')) {
// 这才是可用的外部页面 URL
console.log('来源页：', referrer);
} else {
console.log('无法获取有效来源');
}
注意过滤 about:（如 about:blank）和 blob: 协议，它们不是真实页面来源，而是浏览器内部生成的伪 URL。
referrer 在单页应用（SPA）里基本失效
Vue Router、React Router 这类前端路由切换不会触发页面重载，document.referrer 始终是首次加载时的值，后续所有“页面跳转”都拿不到更新后的来源。
替代方案只有两个：
- 手动在路由跳转时把上一页路径存到
sessionStorage或history.state里 - 服务端下发来源信息（比如通过 URL query 参数
?ref=xxx）
例如：router.push({ path: '/detail', query: { ref: window.location.pathname } })，然后在目标组件里读 this.$route.query.ref（Vue）或 useSearchParams()（React）。
想记录来源但 referrer 不可靠？优先考虑 UTM 参数
营销链接、广告投放、邮件推广这些可控渠道，别依赖 document.referrer。统一加 utm_source、utm_medium 等参数，比如：https://example.com/?utm_source=newsletter&utm_medium=email。
这样既绕过浏览器策略限制，又能精确归因。解析也很简单：
const url = new URL(window.location.href);
const utmSource = url.searchParams.get('utm_source'); // 'newsletter'
const utmMedium = url.searchParams.get('utm_medium'); // 'email'
真实项目中，document.referrer 更像是兜底手段——只在你完全无法控制入口链接时才看一眼，而且得做好它为空的心理准备。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
