Next.js国际化中反向代理端口错误问题的解决方案

在Next.js应用中使用next-intl进行国际化开发时，当配合Nginx反向代理部署时，可能会遇到一个典型问题：系统自动重定向时会错误地附加后端服务端口号。本文将深入分析问题成因并提供完整的解决方案。

问题现象

在配置了基于域名的国际化路由后，访问主域名下的语言路径（如https://domain.com/en）时，系统会错误地重定向到带有后端端口号的地址（如https://en.domain.com:3001），而不是预期的https://en.domain.com。

技术背景

这种问题通常出现在以下技术栈组合中：

1. Next.js应用运行在3001端口
2. Nginx作为反向代理处理HTTPS(443)请求
3. 使用next-intl库实现国际化路由
4. 采用域名区分语言（如domain.com和en.domain.com）

根本原因分析

通过检查请求头信息，发现Nginx默认传递的X-Forwarded-Port头值为后端服务端口(3001)，而非客户端实际访问的HTTPS端口(443)。next-intl在生成重定向URL时，会优先使用这个头部信息来确定端口号。

完整解决方案

Nginx配置修正

关键是在Nginx配置中添加正确的端口转发头：

server {
    # ...其他配置...
    
    location / {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port 443; # 关键修复
    }
}

Next.js中间件验证

建议在中间件中添加日志输出，验证接收到的头部信息：

export default function middleware(request: NextRequest) {
    console.log('Request Headers:', Object.fromEntries(request.headers));
    // ...其他中间件逻辑...
}

完整头部要求

对于反向代理场景，确保传递以下关键头部：

• X-Forwarded-Host：客户端原始请求的主机名
• X-Forwarded-Proto：客户端使用的协议(https)
• X-Forwarded-Port：客户端实际访问的端口(443)
• X-Forwarded-For：客户端真实IP

最佳实践建议

1. 生产环境头部配置：始终在反向代理中显式设置所有X-Forwarded-*头部
2. 安全考虑：确保这些头部只能由可信的反向代理设置，防止头部欺骗
3. 多环境测试：在开发、预生产和生产环境验证重定向行为
4. 文档记录：在项目文档中明确记录代理配置要求

总结

通过正确配置Nginx的转发头部，特别是X-Forwarded-Port，可以解决next-intl在国际化重定向中错误附加端口号的问题。这个问题很好地展示了在实际部署中，理解整个请求链路中各组件如何协作的重要性。建议开发者在类似架构中，都要仔细检查请求头信息的传递情况。