React+Express+MySQL注册时POST 404错误求助

问题描述 #

我是React开发新手，采用Express.js作为后端、MySQL作为数据库开发登录/注册功能。提交注册表单时持续出现错误：SignUpModal.js:19 POST http://localhost:5000/admin-signup 404 (Not Found)。以下是前后端代码，请求解决404问题以实现用户凭证插入数据库的功能。

后端路由代码 #

// Signup Route 
app.post('/admin-signup', async (req, res) => {
    const { username, password } = req.body;

    if (!username || !password) {
        return res.status(400).json({ message: 'Username and password are required' });
    }

    try {
        // 检查用户名是否已存在
        const [existingUser] = await db.query('SELECT * FROM user WHERE username = ?', [username]);
        if (existingUser.length > 0) {
            return res.status(400).json({ message: 'Username already exists' });
        }

        // 哈希加密密码
        const hashedPassword = await bcrypt.hash(password, 10);

        // 将新用户插入数据库
        const result = await db.query('INSERT INTO user (username, password, role) VALUES (?, ?, ?)', [username, hashedPassword, 'admin']);

        // 生成JWT令牌
        const token = jwt.sign({ id: result.insertId, username }, 'your_jwt_secret', { expiresIn: '1h' });

        res.status(201).json({ message: 'User created successfully', token });
    } catch (err) {
        console.error('注册过程出错:', err.message);
        res.status(500).json({ message: 'Internal server error' });
    }
});

前端注册模态框代码 #

import React, { useState } from 'react';
import axios from 'axios'; // 引入axios发送HTTP请求

const SignUpModal = ({ isOpen, onClose }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();

        // 清除之前的提示信息
        setError('');
        setSuccess('');

        try {
            // 发送POST请求到/admin-signup接口
            const response = await axios.post('http://localhost:5000/admin-signup', { username, password });

            // 处理注册成功逻辑
            if (response.status === 201) {
                console.log(response.data.message); // 打印成功信息
                setSuccess(response.data.message);
                // 可选：将令牌存储到localStorage或全局状态
                localStorage.setItem('token', response.data.token);
                // 可选：跳转页面或更新UI
                onClose(); // 注册成功后关闭模态框
            }
        } catch (err) {
            // 完善错误处理
            if (err.response) {
                // 服务器返回非2xx状态码
                setError(err.response.data.message || '注册过程中出现错误');
            } else if (err.request) {
                // 发送请求但未收到响应
                setError('未收到服务器响应');
            } else {
                // 请求设置过程出错
                setError('请求设置出错: ' + err.message);
            }
        }
    };


    if (!isOpen) return null;

    return (
        <div className='modal-overlay'>
            <div className='modal-content'>
                <button className='close-btn' onClick={onClose}>X</button>
                <h2>注册</h2>
                <form onSubmit={handleSubmit}>
                    <label>
                        用户名:
                        <input
                            type='text'
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            required
                        />
                    </label>
                    <label>
                        密码:
                        <input
                            type='password'
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                        />
                    </label>
                    <button type='submit'>注册</button>
                    {success && <p className='success-message'>{success}</p>}
                    {error && <p className='error-message'>{error}</p>}
                </form>
            </div>
        </div>
    );
};

export default SignUpModal;

解决方案 #

1. 确认后端服务状态与端口 #

• 检查终端是否有Express服务启动日志，确保服务监听localhost:5000
• 直接在浏览器访问http://localhost:5000/admin-signup，若返回405 Method Not Allowed说明接口存在；若仍返回404，说明路由未正确挂载

2. 验证路由挂载顺序 #

• 确保app.post('/admin-signup')代码写在Express实例初始化后、app.listen()之前
• 若路由拆分到单独文件，需确认用app.use()引入了该路由模块，例如：

  const adminRoutes = require('./routes/admin');
  app.use('/', adminRoutes);
  

3. 配置CORS解决跨域拦截 #

• 前端若运行在其他端口（如3000），浏览器会拦截跨域请求，可能伪装成404错误。安装并配置cors中间件：

  npm install cors
  

  const cors = require('cors');
  app.use(cors()); // 生产环境建议配置允许的具体域名
  

4. 检查请求路径拼写 #

• 确认后端路由路径/admin-signup与前端请求路径完全一致，避免大小写、连字符/拼写错误

5. 启用JSON请求体解析 #

• 后端需添加express.json()中间件解析POST请求的JSON数据，确保在路由定义前添加：

  app.use(express.json());
  

内容的提问来源于stack exchange，提问作者Kurt Bernstein Blancia