MongoDB书籍交换网站创建列表功能失效排查求助

我们正在开发基于MongoDB、Flask、ReactJS和Python的书籍交换网站，注册与登录功能正常，数据可在MongoDB Compass中查看，但点击添加列表时，数据无法存入列表数据库，网络请求返回**404(NOT FOUND)**错误。

前端代码（CreateListing.js） #

const tryCreateListing = async (e) => {
    e.preventDefault();
    try {
      const responseProfile = await axios.get(
        process.env.REACT_APP_API_BASE + "/user",
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      console.log("PROFILE RESPONSE:", responseProfile);
      const userId = responseProfile.data.profile._id;
      const imageUrls = await uploadFiles(images);
      const responseCreateListing = await axios.post(
        process.env.REACT_APP_API_BASE + "/createlisting",
        {
          user_id: userId,
          title: title,
          isbn: isbn,
          price: price,
          description: description,
          condition: condition,
          img: imageUrls,
        },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      console.log("Create listing response: ", responseCreateListing);
      if (responseCreateListing.status === 202) setSuccess(true);
    } catch (error) {
      setSuccess(false);
      console.log("Create listing error: ", error);
    }
  };

报错信息 #

Failed to load resource: the server responded with a status of 404 (NOT FOUND)
CreateListing.js:194 Create listing error: AxiosError

已尝试修改代码、参考其他教程，问题仍未解决，目标是实现用户点击添加列表后数据成功存入列表数据库。

404错误核心原因是前端请求的后端路由不存在，按以下步骤逐一排查：

1. 检查Flask后端路由定义 #

• 确认后端是否存在/createlisting的POST路由，注意Flask路由区分大小写，避免出现/createListing或/create_listing这类拼写差异。
• 正确路由示例：

from flask import Flask, request, jsonify
from flask_jwt_extended import jwt_required

app = Flask(__name__)

@app.route('/createlisting', methods=['POST'])
@jwt_required()
def create_listing():
    # 获取前端传入的数据
    request_data = request.get_json()
    # 编写MongoDB存储逻辑（示例）
    # listing_collection.insert_one(request_data)
    return jsonify({"msg": "列表创建成功"}), 202

2. 验证API_BASE环境变量 #

• 检查process.env.REACT_APP_API_BASE的值是否包含末尾斜杠，若API_BASE为http://localhost:5000/，拼接后会变成http://localhost:5000//createlisting，导致路由无效。建议去掉环境变量末尾斜杠，或改用模板字符串拼接：${process.env.REACT_APP_API_BASE}/createlisting。

3. 测试后端服务可用性 #

• 确认Flask服务在指定端口正常运行，直接用Postman或浏览器发送POST请求到[API_BASE]/createlisting，携带正确的Authorization头和请求体，验证后端是否能正常响应，排除前端代码问题。

4. 检查JWT认证配置 #

• 确认/createlisting路由添加了JWT认证装饰器（如@jwt_required()），且前端请求的Authorization头格式正确（Bearer + 空格 + token）。部分后端错误处理逻辑可能将认证失败伪装成404，需确认这一点。

5. 跨域配置检查 #

• 若前后端域名/端口不同，确认Flask后端已配置CORS：

from flask_cors import CORS
CORS(app)

虽然跨域问题通常返回403，但配置异常也可能导致响应错误。

内容的提问来源于stack exchange，提问作者Michael Angelo Magante