请求头Referer与document.referrer不一致，能否自定义设置该请求头？

差异产生原因 #

二者的表现属于浏览器规范层面的正常逻辑，核心原因是两个字段的语义定义完全不同：

• document.referrer 记录的是页面导航来源：也就是将用户带到当前页面的上一级页面地址，你的场景中是从test.html点击链接跳转到new.html，因此new.html的document.referrer固定为test.html的地址，只要当前页面不发生新的跳转就不会变化。
• HTTP请求头的Referer记录的是请求发起来源：默认取发起该请求的当前文档的URL，也就是你当前页面的location.href，你的fetch请求是在new.html内发起的，因此默认填充的Referer就是new.html的地址。
• 你配置的unsafe-url是Referrer策略，仅控制Referer值是否会被截断、是否允许跨域传递，不会修改Referer的取值逻辑，因此不影响上述默认规则。

自定义请求头Referer的实现方法 #

可以直接将前序页面地址（即document.referrer）手动设置到请求头中，不需要额外配置，直接在fetch请求的参数中指定headers即可：

setTimeout(() =>{
  console.log(fetch("http://localhost:3002/", {
    headers: {
      "Referer": document.referrer
    }
  }))
}, 4000)

如果有大量请求需要统一修改，也可以通过封装fetch或者添加请求拦截器的方式，全局给所有请求的Referer替换为document.referrer的值，无需每个请求单独配置。

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