修复 MERN Stack 用户注册表单 404 错误-js教程-PHP中文网

修复 MERN Stack 用户注册表单 404 错误

碧海醫心

发布： 2025-08-16 15:56:01

原创

364人浏览过

修复 mern stack 用户注册表单 404 错误

本文旨在解决 MERN Stack 开发中用户注册表单提交时遇到的 404 错误。通过检查前端请求 URL、后端路由配置以及可能的 CORS 问题，提供详细的排查和解决方案，确保注册功能正常运行。文章将重点关注前端 fetch 请求的正确配置以及后端 Express 路由的设置。

在 MERN (MongoDB, Express.js, React.js, Node.js) Stack 开发中，用户注册功能是常见的需求。然而，在实现注册表单时，开发者可能会遇到 404 错误，这通常表示客户端发送的请求无法在服务器端找到对应的路由处理程序。以下将详细介绍如何排查和解决这个问题。

检查前端请求 URL

最常见的原因是前端代码中的 fetch 请求 URL 不正确。在 React 组件中，如果使用相对路径（例如 /signup）发送请求，浏览器会尝试将请求发送到与当前页面相同的域和端口。如果后端 API 服务运行在不同的端口或域上，就会导致 404 错误。

例如，以下代码片段：

fetch('/signup', {
  method: 'POST',
  body: formData,
})

登录后复制

应该修改为包含完整 URL 的绝对路径，确保请求指向正确的后端 API 端点。假设后端服务运行在 http://localhost:4000 上，正确的代码如下：

fetch('http://localhost:4000/signup', {
  method: 'POST',
  body: formData,
})

登录后复制

确保 URL 与后端路由配置一致，是解决 404 错误的第一步。

验证后端路由配置

即使前端请求 URL 正确，如果后端 Express 应用没有正确配置路由，仍然会遇到 404 错误。检查 routes/main.js 文件，确保 /signup 路由已正确定义，并且与处理注册请求的控制器函数关联。

const express = require("express");
const router = express.Router();
const authController = require("../controllers/auth");

//Routes for user login/signup
router.post("/signup", authController.postSignup); // 确保这里是 POST 请求

module.exports = router;

登录后复制

同时，检查 app.js 或 server.js 文件，确认路由模块已正确加载并挂载到 Express 应用上。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

const mainRoutes = require("./routes/main");

//Setup Routes For Which The Server Is Listening
app.use("/", mainRoutes);

登录后复制

确保路由定义与请求方法（GET、POST 等）一致，是避免 404 错误的关键。

处理 CORS (跨域资源共享) 错误

当前端应用和后端 API 服务运行在不同的域或端口上时，浏览器会阻止跨域请求，导致 CORS 错误。虽然 CORS 错误通常不会直接显示为 404，但它可能阻止请求到达后端，从而导致类似的问题。

在 Express 应用中，可以使用 cors 中间件来启用 CORS。

const cors = require('cors');
app.use(cors());

登录后复制

或者，可以更精细地配置 CORS 选项，例如允许特定的来源：

app.use(cors({
  origin: 'http://localhost:3000', // 允许来自 http://localhost:3000 的请求
  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 允许的 HTTP 方法
  credentials: true // 允许发送 cookie
}));

登录后复制

CORS 配置应该根据实际需求进行调整，确保前端应用可以安全地访问后端 API。