Next.js中next-absolute-url生产环境获取origin异常如何解决

问题根因 #

你使用的absoluteUrl方法在无法从请求中读取到正确的域名信息时，会默认回退到本地开发的http://localhost:3000，生产环境没有正确获取到站点真实域名就会触发这个默认逻辑。

解决方案 #

方案1：环境变量固定站点域名（推荐，适配性最高） #

该方案不受部署环境请求头配置影响，稳定性最好。

1. 在项目根目录的.env.production配置文件中添加站点域名变量：

NEXT_PUBLIC_SITE_URL=https://你的生产站点实际域名.com

2. 修改fetchRelative方法，优先读取环境变量：

const fetchRelative = (req: any) => {
  // 生产环境优先读取预设的站点域名
  if (process.env.NEXT_PUBLIC_SITE_URL) {
    return process.env.NEXT_PUBLIC_SITE_URL;
  }
  const { origin } = absoluteUrl(req);
  return origin;
}
const origin = await fetchRelative(reqObj);

方案2：自行实现origin获取逻辑 #

如果你不想引入环境变量，且能保证部署环境正确透传请求头，可以替换第三方absoluteUrl的调用，自行从请求头读取参数：

const fetchRelative = (req: any) => {
  const protocol = req.headers['x-forwarded-proto'] || 'http';
  const host = req.headers['host'] || 'localhost:3000';
  return `${protocol}://${host}`;
}
const origin = await fetchRelative(reqObj);

注意：使用该方案需要在你的反向代理（Nginx/CDN等）中配置透传X-Forwarded-Proto和Host请求头，否则仍然会获取到错误值。

方案3：客户端逻辑直接读取浏览器属性 #

如果这段获取origin的逻辑是在客户端（浏览器端）执行的，不需要依赖服务端req对象，直接读取window属性即可：

// 仅可在客户端组件/客户端运行的逻辑中使用
const origin = window.location.origin;

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