Next.js getServerSideProps请求缺失Referer头：原因及传参方案咨询

1. 如何手动携带Referer头传递至后端 #

在getServerSideProps中，服务器端发起的请求不会自动携带Referer，需要手动在请求头中添加。可以通过context.req获取当前用户请求的源地址和路径，拼接成合法的Referer值：

示例1：使用fetch #

export async function getServerSideProps(context) {
  // 拼接当前请求的Referer值，origin为空时用预设域名兜底
  const origin = context.req.headers.origin || process.env.NEXT_PUBLIC_APP_DOMAIN;
  const referer = `${origin}${context.req.url}`;

  const res = await fetch('你的后端API接口地址', {
    method: 'GET', // 根据实际请求方法调整
    headers: {
      'Referer': referer,
      // 其他必要请求头，如Content-Type、Authorization等
    }
  });

  const data = await res.json();
  return { props: { data } };
}

示例2：使用axios #

import axios from 'axios';

export async function getServerSideProps(context) {
  const origin = context.req.headers.origin || process.env.NEXT_PUBLIC_APP_DOMAIN;
  const referer = `${origin}${context.req.url}`;

  const res = await axios.get('你的后端API接口地址', {
    headers: {
      'Referer': referer
    }
  });

  return { props: { data: res.data } };
}

2. 为什么该场景下Referer头会缺失 #

Referer头是浏览器在前端发起请求时自动添加的字段，用于标识请求的来源页面。但getServerSideProps是在Next.js服务器端执行的代码，此时的请求是Next.js服务器直接向后端服务器发起的服务器间请求，完全脱离了浏览器环境，所以不会有浏览器自动注入的Referer头，后端自然接收不到。

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