部署Next.js 14+Nginx遇证书验证失败及混合内容问题求助

核心问题分析 #

你遇到的是两个关联但独立的问题：

• 浏览器混合内容拦截：页面通过HTTPS加载，但客户端组件硬编码了HTTP协议的API地址，浏览器会拦截这类不安全的跨协议请求。
• 服务端证书验证失败：改为HTTPS调用API后，Next.js服务端发起的fetch请求无法通过SSL证书验证，原因是证书不被Node.js信任（大概率是自签名证书或证书链不完整）。

分步解决方案 #

1. 修复客户端组件的混合内容问题 #

不要在API调用中硬编码完整的HTTP地址，改用相对路径发起请求：

// 错误写法（触发混合内容拦截）
fetch('http://nextapp.aaa.com/api/images/internal/preview')

// 正确写法（自动继承页面的HTTPS协议）
fetch('/api/images/internal/preview')

这种写法会自动匹配当前页面的访问协议，无论用户是通过HTTP跳转前还是HTTPS跳转后访问，API请求都会使用对应协议，彻底避免混合内容问题。

2. 解决服务端证书验证失败问题 #

情况A：使用自签名证书（开发/测试环境）

自签名证书默认不被Node.js信任，可临时在服务端fetch请求中禁用证书验证（仅开发环境使用，生产环境禁止）：

import https from 'https';

// 服务端组件中的fetch请求添加证书验证跳过选项
fetch('https://nextapp.aaa.com/api/images/internal/preview', {
  agent: new https.Agent({
    rejectUnauthorized: false
  })
})

或者将自签名证书添加到Node.js的系统信任根目录（操作方式随系统不同：Linux在/etc/ssl/certs，Windows通过系统证书管理器导入）。

情况B：使用CA颁发的证书（生产环境）

检查Nginx配置中的证书完整性：

• 确保ssl_certificate指向的是包含中间证书的完整证书链文件，而非仅域名证书。多数CA会提供合并后的全链证书（比如Let's Encrypt的fullchain.pem）。
• 用openssl x509 -in nextapp.aaa.com.crt -text -noout命令验证证书信息，确认证书链完整且域名匹配。

3. 优化Nginx配置，让Next.js识别HTTPS请求 #

在Nginx的HTTPS server块的location /中添加X-Forwarded-Proto头，确保Next.js能识别到请求是通过HTTPS转发的：

location / {
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 添加该行，告知Next.js当前请求协议
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://127.0.0.1:3000;
}

这会让Next.js内部生成的URL自动使用HTTPS，避免服务端组件中出现HTTP协议的API调用。

额外建议 #

• 生产环境优先使用Let's Encrypt等可信CA颁发的免费证书，彻底规避证书信任问题。
• 检查next.config.js，确认没有强制设置HTTP协议的配置项（如assetPrefix、basePath错误配置）。

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