Next.js 14生产环境经WAF转发POST请求失效问题排查

问题核心分析 #

从错误日志TypeError: Invalid URL及input: 'testdomain1.com'可明确：Next.js在构建请求URL时仅拿到了不带协议（http/https）的后端服务器域名，导致URL解析失败。直接访问服务器正常，说明问题出在WAF/负载均衡的请求头转发配置或Next.js对转发头的信任设置上。

解决步骤 #

1. 修正WAF/负载均衡的请求头转发 #

• 确保WAF/负载均衡向后端服务器转发以下关键请求头：
  • X-Forwarded-Proto：传递原始请求的协议（http/https）
  • X-Forwarded-Host：传递原始请求的主域名（testdomain.com）
  • Host：保持原始请求的Host值（testdomain.com），而非后端服务器的域名（testdomain1.com/testdomain2.com）
• 多数WAF/负载均衡默认会修改或丢弃这些头，需手动开启转发规则。

2. 配置Next.js信任转发头 #

在next.config.js中添加以下配置，让Next.js使用转发的头信息构建正确URL：

/** @type {import('next').NextConfig} */
const nextConfig = {
  trustHostHeader: true,
  forwardedHeaders: {
    host: true,
    protocol: true,
  },
};

module.exports = nextConfig;

3. 检查内部API调用逻辑 #

如果项目中存在Server Component或API Route内的内部API调用（如fetch('/api/xxx')），需确保：

• Next.js能通过转发头获取到正确的协议和主域名，自动拼接完整URL
• 避免硬编码后端服务器域名，改用相对路径或依赖Next.js的自动URL解析

4. 验证配置有效性 #

在任意API Route中添加日志，确认转发头是否正确传递：

export async function POST(request) {
  console.log('X-Forwarded-Proto:', request.headers.get('x-forwarded-proto'));
  console.log('Host:', request.headers.get('host'));
  // 业务逻辑
}

若日志中显示Host为testdomain.com、X-Forwarded-Proto为https，则配置生效。

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