NextJs/Express服务器域名HTTPS请求错误与构建失败问题求助

核心矛盾分析 #

当前问题的核心冲突：

• 域名启用HTTPS后，前端请求HTTP协议的VPS IP接口触发浏览器混合内容拦截
• 临时添加的upgrade-insecure-requests标签会强制将HTTP请求升级为HTTPS，但你的Express服务仅运行在HTTP协议下，导致接口请求失败
• 修改Next.js配置为HTTPS后，构建阶段因无HTTPS服务器运行报错

以下是两种实用解决方案：

方案一：Nginx反向代理（推荐，适配已有Certbot配置） #

利用Nginx将域名的HTTPS请求反向代理到本地HTTP协议的Express服务，既解决混合内容问题，又无需修改Next.js构建配置。

1. 修改Nginx域名配置
   在你的域名server块中添加反向代理规则，将接口路径转发到本地Express服务：

server {
    listen 443 ssl;
    server_name mydomain.com;

    # 保留Certbot自动生成的SSL配置
    ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # 代理Next.js静态构建产物
    location / {
        root /path/to/your/nextjs/.next/static;
        try_files $uri $uri/ /index.html;
    }

    # 反向代理Express接口
    location /check {
        proxy_pass http://127.0.0.1:1005/check;
        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; # 告知Express请求来自HTTPS
    }
}

2. 更新Next.js接口请求地址
   将前端代码中原本的http://vpsip:1005/check改为https://mydomain.com/check，无需指定端口。

3. 重启服务
   执行命令重启Nginx和Express：

sudo systemctl restart nginx
# 根据你的Express启动方式重启服务，例如用pm2：
pm2 restart your-express-app

方案二：为Express配置HTTPS #

直接让Express服务运行在HTTPS协议下，适配域名的HTTPS要求。

1. 修改Express代码加载Certbot证书
   将Certbot生成的证书配置到Express的HTTPS服务器：

const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();

// 保留原有接口逻辑
app.get('/check', (req, res) => {
    // 你的接口处理代码
    res.json({ status: 'ok' });
});

// 加载Certbot生成的SSL证书
const sslOptions = {
    key: fs.readFileSync('/etc/letsencrypt/live/mydomain.com/privkey.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/mydomain.com/fullchain.pem')
};

// 启动HTTPS服务器
https.createServer(sslOptions, app).listen(1005, () => {
    console.log('Express HTTPS server running on port 1005');
});

2. 配置Next.js区分开发/生产环境
   在next.config.js中根据环境变量设置不同的接口地址，避免构建阶段报错：

module.exports = {
    env: {
        API_CHECK_URL: process.env.NODE_ENV === 'production' 
            ? 'https://mydomain.com:1005/check' 
            : 'http://localhost:1005/check'
    }
};

前端代码中使用process.env.API_CHECK_URL作为请求地址即可。

3. 重启Express服务
   确保Express以HTTPS方式启动，之后前端请求https://mydomain.com:1005/check即可正常访问。

额外说明 #

• 移除之前添加的<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />标签，避免不必要的请求强制升级
• Next.js构建阶段仅编译代码，不会发起实际接口请求，因此生产环境的HTTPS地址不会影响构建过程

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