生产环境Next.js API路由Nginx返回404问题求助

核心问题 #

生产环境下，Next.js 9.4.0页面重载时，getInitialProps调用内部API路由返回Nginx生成的404错误，本地环境无此问题；禁用SSL后API可正常工作，说明问题出在SSL配置与Next.js反向代理的适配环节。

排查与修复步骤 #

1. 修正Nginx SSL配置的反向代理规则 #

确保Nginx处理HTTPS请求时，正确转发API请求到Next.js服务，并传递关键协议头。常见错误是HTTPS监听器下的location规则未覆盖API路由，或未传递X-Forwarded-Proto头导致Next.js判断错误。

示例正确的Nginx SSL配置片段：

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 处理Next.js API路由
    location /api/ {
        proxy_pass http://localhost:3000; # 对应你的Next.js服务端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme; # 关键：告知Next.js当前为HTTPS协议
        proxy_cache_bypass $http_upgrade;
    }

    # 处理静态资源与页面
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

2. 配置Next.js信任反向代理 #

在next.config.js中添加信任代理配置，确保Next.js识别Nginx传递的协议头：

module.exports = {
  serverRuntimeConfig: {
    trustedProxies: ['127.0.0.1', '::1'], // 对应Nginx所在IP，本地转发填127.0.0.1即可
  },
  publicRuntimeConfig: {
    apiUrl: process.env.NODE_ENV === 'production' ? 'https://your-domain.com/api' : 'http://localhost:3000/api'
  }
}

同时在getInitialProps中确保API请求使用正确的生产环境HTTPS地址，避免硬编码HTTP：

MyPage.getInitialProps = async (ctx) => {
  const apiUrl = process.env.NODE_ENV === 'production' ? 'https://your-domain.com/api/data' : 'http://localhost:3000/api/data';
  const res = await fetch(apiUrl);
  const data = await res.json();
  return { data };
}

3. 检查HTTP转HTTPS的重定向规则 #

如果配置了HTTP转HTTPS，确保重定向保留完整请求路径，避免API请求被截断：

server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$host$request_uri; # 保留完整路径
}

禁止使用return 301 https://your-domain.com;这类会丢失请求路径的写法。

4. 验证PM2日志的请求细节 #

查看PM2日志中记录的完整请求URL，确认getInitialProps发起的API请求是否为HTTPS协议、路径是否正确。若请求为HTTP，说明Next.js未正确识别X-Forwarded-Proto头，回到步骤1和2重新检查配置。

额外排查点 #

• 检查AWS EC2安全组，确保443端口已对外开放，Nginx正常监听443端口。
• 用openssl s_client -connect your-domain.com:443验证SSL证书有效性。

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