Nuxt3中Referrer Header获取为undefined的问题咨询

问题原因 #

跨端口重定向（http://localhost到http://localhost:3000）时，浏览器默认的Referrer Policy可能会清空referrer，导致useRequestHeaders()无法获取到值；另外，服务端重定向过程中referrer也可能丢失。

解决方案 #

• 客户端跳转前预存来源
  如果是前端主动跳转，在跳转前先获取当前页面的referrer，通过URL参数传递到目标页面：

  // 跳转前的页面代码
  const originReferrer = document.referrer || window.location.href;
  window.location.href = `http://localhost:3000?referrer=${encodeURIComponent(originReferrer)}`;
  

  在目标页面的app.vue中读取参数：

  const route = useRoute();
  const referrer = route.query.referrer || document.referrer;
  

• 调整页面Referrer Policy
  在页面的<head>中添加meta标签，设置更宽松的referrer规则，确保跨端口跳转时保留referrer：

  <meta name="referrer" content="strict-origin-when-cross-origin">
  

  这个规则会在跨源（包括跨端口）时仅发送源信息，同源时发送完整referrer；如果需要完整路径，可以用origin-when-cross-origin。

• 服务端重定向时传递referrer
  如果是服务端触发的重定向，直接在重定向时把原请求的referrer作为参数传递：

  // Node.js服务端示例
  app.get('/', (req, res) => {
    const referrer = req.headers.referer || req.headers.referrer;
    res.redirect(`http://localhost:3000?referrer=${encodeURIComponent(referrer || req.url)}`);
  });
  

• 存储到Cookie并在Axios中使用
  获取到referrer后，存储到Cookie：

  function setCookie(name, value, days = 7) {
    const expires = new Date(Date.now() + days * 86400000).toUTCString();
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
  }
  
  // 获取到referrer后执行存储
  setCookie('source_referrer', referrer);
  

  后续Axios请求时自动读取Cookie并设置Header：

  function getCookie(name) {
    return document.cookie.split('; ').find(row => row.startsWith(`${name}=`))?.split('=')[1];
  }
  
  axios.interceptors.request.use(config => {
    const referrer = getCookie('source_referrer');
    if (referrer) {
      config.headers.Referer = decodeURIComponent(referrer);
    }
    return config;
  });
  

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