使用HTML/JS/NodeJS/SQLite开发注册表单遇405及JSON错误求助

问题现象 #

在开发注册表单时，使用fetch提交数据到数据库时遇到两个问题：

• POST http://127.0.0.1:5500/register 405 (Method Not Allowed) 错误
• 第69行出现 Error: SyntaxError: Unexpected end of JSON input 错误

核心原因 #

1. 405错误：前端页面通过静态文件服务器（如VSCode Live Server）运行在127.0.0.1:5500，而你的Node.js后端也监听该端口，导致请求未命中Express的POST路由，反而被静态服务器拒绝。
2. JSON解析错误：405响应并非JSON格式，前端强行用response.json()解析，触发语法错误。

修复步骤 #

1. 统一服务入口，让Express托管前端文件 #

在server.js中添加静态文件托管配置，让Node.js同时负责前端页面和API服务：

// 在bodyParser配置后添加
app.use(express.static('public')); // 假设前端HTML/JS文件放在项目根目录的public文件夹下

随后将你的HTML、JS文件移动到项目根目录下新建的public文件夹中。

2. 正确启动与访问 #

• 停止当前运行的静态文件服务器（如Live Server）
• 运行node server.js启动Express后端
• 在浏览器中访问http://127.0.0.1:5500，此时前端请求会直接发送到Express后端，匹配/register路由

3. 优化前端错误处理（可选） #

为避免非JSON响应导致的解析错误，在fetch链中先检查响应状态：

fetch("/register", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        firstName: firstName,
        surname: surname,
        email: email,
        password: password
    })
})
.then(response => {
    if (!response.ok) {
        throw new Error(`请求失败：状态码 ${response.status}`);
    }
    return response.json();
})
.then(data => {
    if (data.success) {
        console.log('注册成功！');
    } else {
        console.error('注册失败');
    }
})
.catch(error => console.error("Error:", error));

4. 安全优化：密码哈希存储（推荐） #

不要明文存储用户密码，使用bcrypt对密码进行哈希处理：

1. 安装依赖：

npm install bcrypt

2. 修改server.js中的注册逻辑：

const bcrypt = require('bcrypt');
const saltRounds = 10;

app.post("/register", (req, res) => {
    const { firstName, surname, email, password } = req.body;
    bcrypt.hash(password, saltRounds, (err, hash) => {
        if (err) {
            console.error("密码哈希失败：", err.message);
            return res.json({ success: false });
        }
        const stmt = db.prepare("INSERT INTO users (firstName, surname, email, password) VALUES (?, ?, ?, ?)");
        stmt.run(firstName, surname, email, hash, err => {
            if (err) {
                console.error("数据插入失败：", err.message);
                res.json({ success: false });
            } else {
                console.log("用户注册成功");
                res.json({ success: true });
            }
            stmt.finalize();
        });
    });
});

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