Node.js文件上传HTTP正常HTTPS报500错误求助

我基于Node.js搭建文件上传服务，使用multer库处理上传逻辑。HTTP模块创建服务器时功能正常，但切换为HTTPS模块后，上传失败并返回500错误。uploads目录与app.js同目录，权限设为755，已配置PEM密钥文件。以下是我的HTTPS服务代码及前端页面代码：

HTTPS服务代码 #

const fs = require('fs');
const https = require('https');  // 切换为'https'
const express = require('express');
const multer = require('multer');
const path = require('path');

const options = {
    key: fs.readFileSync(path.join(__dirname, './cert/key.pem')),
    cert: fs.readFileSync(path.join(__dirname, './cert/cert.pem'))
}

const app = express();
const server = https.createServer(options, app);  // 创建HTTPS服务器

const port = 24006;

// 文件存储配置
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'uploads/');  // 确保uploads目录存在
    },
    filename: function(req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

// 初始化multer
const upload = multer({ storage: storage });

// 文件上传接口
app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    res.send(`File uploaded successfully: ${req.file.filename}`);
});

// 启动服务器
server.listen(port, () => {
    console.log(`Server is running on https://localhost:${port}`);
});

前端Index.html代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Machine Status</title>
   
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" accept="*/*">
        <button type="submit">Upload File</button>
    </form>
    
    <script>
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    const formData = new FormData(this);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});
    </script>
</body>
</html>

排查与解决步骤 #

1. 捕获服务器错误，定位具体问题 #

原代码未处理Multer的上传错误，导致返回500但无法获知具体原因。修改上传接口，添加错误捕获并打印日志：

app.post('/upload', (req, res) => {
  upload.single('file')(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      console.error('Multer错误:', err);
      return res.status(500).send(`Multer错误: ${err.message}`);
    } else if (err) {
      console.error('上传错误:', err);
      return res.status(500).send(`上传错误: ${err.message}`);
    }
    if (!req.file) {
      return res.status(400).send('未上传任何文件。');
    }
    res.send(`文件上传成功: ${req.file.filename}`);
  });
});

启动服务器后，上传文件时查看控制台，就能看到具体错误信息，比如路径不存在、权限不足等。

2. 解决混合内容拦截问题 #

如果直接打开本地index.html（协议为file://），或者通过HTTP访问前端页面，向HTTPS接口发请求会被浏览器视为混合内容拦截。解决方法：
在服务代码中添加静态文件托管，让前端通过HTTPS访问：

app.use(express.static(path.join(__dirname, '.')));

之后通过https://localhost:24006/index.html打开前端页面，再进行上传操作。

3. 修正文件存储路径 #

将相对路径改为绝对路径，避免环境差异导致的路径解析错误，同时确保uploads目录存在：

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        const uploadPath = path.join(__dirname, 'uploads/');
        // 自动创建目录，不存在则生成
        fs.mkdirSync(uploadPath, { recursive: true });
        cb(null, uploadPath);
    },
    filename: function(req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

4. 处理HTTPS证书问题 #

如果是自签名证书，浏览器会默认阻止请求：

• 手动访问https://localhost:24006，在浏览器中添加证书信任
• 开发环境下，可在fetch请求中跳过证书验证（生产环境禁止）：

// 注意：仅开发环境使用
fetch('/upload', {
    method: 'POST',
    body: formData,
    agent: new https.Agent({ rejectUnauthorized: false })
})

完整修正后的服务代码 #

const fs = require('fs');
const https = require('https');
const express = require('express');
const multer = require('multer');
const path = require('path');

const options = {
    key: fs.readFileSync(path.join(__dirname, './cert/key.pem')),
    cert: fs.readFileSync(path.join(__dirname, './cert/cert.pem'))
}

const app = express();
const server = https.createServer(options, app);

const port = 24006;

// 托管静态文件，包括index.html
app.use(express.static(path.join(__dirname, '.')));

// 文件存储配置
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        const uploadPath = path.join(__dirname, 'uploads/');
        fs.mkdirSync(uploadPath, { recursive: true });
        cb(null, uploadPath);
    },
    filename: function(req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

const upload = multer({ storage: storage });

// 带错误处理的上传接口
app.post('/upload', (req, res) => {
    upload.single('file')(req, res, function (err) {
        if (err instanceof multer.MulterError) {
            console.error('Multer错误:', err);
            return res.status(500).send(`Multer错误: ${err.message}`);
        } else if (err) {
            console.error('上传错误:', err);
            return res.status(500).send(`上传错误: ${err.message}`);
        }
        if (!req.file) {
            return res.status(400).send('未上传任何文件。');
        }
        res.send(`文件上传成功: ${req.file.filename}`);
    });
});

server.listen(port, () => {
    console.log(`服务器运行在 https://localhost:${port}`);
});

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