基于HTML、JavaScript和MongoDB的员工反馈系统405错误求助

问题描述 #

搭建员工反馈收集系统（Node.js后端+HTML前端，存储到MongoDB）时，提交反馈出现错误：

Failed to submit feedback. Please try again later.

详细错误日志：

api/feedback:1 
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
employee_feedback.html:71 Error: Error saving feedback.

后端代码（Node.js） #

const express = require('express');
const mongoose = require('mongoose');
const path = require('path');

const app = express();
const port = process.env.PORT || 3000;

// Serve static files (HTML, CSS, JS)
app.use(express.static(path.join(__dirname, 'public')));

// Use express.json() to parse JSON bodies
app.use(express.json());

// Connect to MongoDB (make sure to have MongoDB installed and running)
mongoose.connect('mongodb://localhost:27017/feedbackDB', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});

mongoose.connection.on('error', (err) => {
    console.error('MongoDB connection error:', err);
});

// Create a mongoose schema for feedback
const feedbackSchema = new mongoose.Schema({
    text: String,
});

const Feedback = mongoose.model('Feedback', feedbackSchema);

// API endpoint to save feedback
app.post('/api/feedback', async (req, res) => {
    const feedbackText = req.body.text;

    if (!feedbackText) {
        return res.status(400).json({ error: 'Feedback text is required.' });
    }

    try {
        const newFeedback = new Feedback({
            text: feedbackText,
        });

        await newFeedback.save();
        res.status(201).json({ message: 'Feedback saved successfully.' });
    } catch (error) {
        console.error('Error saving feedback to the database:', error);
        res.status(500).json({ error: 'Error saving feedback to the database.' });
    }
});

// Catch-all middleware for handling other routes
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'employee_feedback.html'));
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

前端代码（HTML） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Feedback System</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        form {
            max-width: 400px;
            margin: 20px auto;
        }

        textarea, button {
            padding: 10px;
            margin: 5px;
            width: 100%;
        }

        #feedbackList {
            max-width: 600px;
            margin: 20px auto;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>Employee Feedback System</h1>

    <form id="feedbackForm">
        <label for="employeeFeedback">Provide your feedback:</label>
        <textarea id="employeeFeedback" rows="4" required></textarea>

        <button type="button" onclick="submitFeedback()">Submit Feedback</button>
    </form>

    <div id="feedbackList">
        <h2>Employee Feedback</h2>
        <ul id="feedbackData"></ul>
    </div>

    <script>
        function submitFeedback() {
            var feedbackText = document.getElementById('employeeFeedback').value;

            if (feedbackText) {
                // Send feedback to the server
                fetch('/api/feedback', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ text: feedbackText }),
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Error saving feedback.');
                    }
                    return response.json();
                })
                .then(data => {
                    alert('Feedback submitted successfully.');
                    document.getElementById('employeeFeedback').value = '';
                })
                .catch(error => {
                    console.error('Error:', error.message);
                    alert('Failed to submit feedback. Please try again later.');
                });
            } else {
                alert('Please provide feedback before submitting.');
            }
        }
    </script>
</body>
</html>

错误原因分析 #

405错误表示请求方法不被目标路径允许，核心原因是POST请求未匹配到后端定义的/api/feedback POST路由，反而被仅支持GET方法的catch-all路由（app.get('*', ...)）拦截，导致返回方法不允许的错误。

排查与解决步骤 #

1. 确认请求路径与路由匹配 #

• 打开浏览器开发者工具的「Network」标签，查看反馈提交请求的完整URL，确认是http://localhost:3000/api/feedback，请求方法为POST。
• 如果URL是http://localhost:3000/employee_feedback.html/api/feedback（相对路径错误），说明前端请求路径未使用绝对路径，确保前端fetch的URL为/api/feedback（代码中已正确设置，可再次确认）。

2. 验证后端路由顺序 #

确保app.post('/api/feedback', ...)路由定义在app.get('*', ...)之前。Express按路由定义顺序匹配请求，如果catch-all路由在前，会优先拦截所有GET/POST请求，导致POST路由无法被匹配。当前代码顺序正确，但如果后续调整过顺序，需修正。

3. 测试后端API可用性 #

用curl或Postman直接发送POST请求测试后端接口：

curl -X POST http://localhost:3000/api/feedback -H "Content-Type: application/json" -d '{"text": "Test feedback"}'

• 如果返回{"message":"Feedback saved successfully."}，说明后端正常，问题出在前端（如缓存、路径错误）。
• 如果仍返回405，检查后端代码是否正确启动，是否有语法错误导致POST路由未注册。

4. 检查MongoDB连接状态 #

查看服务器控制台日志，确认MongoDB连接成功。如果连接失败（如MongoDB未启动、连接字符串错误），虽不会直接导致405，但可能影响服务器稳定性，需修复：

• 启动本地MongoDB服务。
• 确认连接字符串mongodb://localhost:27017/feedbackDB正确。

5. 确保静态文件目录配置正确 #

确认前端employee_feedback.html文件放在后端代码中指定的public目录下，path.join(__dirname, 'public')需指向正确的静态资源目录，避免页面通过catch-all路由加载时出现路径解析问题。

内容的提问来源于stack exchange，提问作者Sa.m.ue