Axios 404错误：无法向MongoDB数据库提交注册信息

一、先搞定404错误 #

1. 修正前端请求路径 #

你前端Axios发送的请求地址是/users/register，但后端路由挂载的前缀是/api/v1/users，实际有效接口地址应为/api/v1/users/register。直接修改Register.js中的请求代码：

await axios.post('/api/v1/users/register', values)

如果前端与后端不在同一端口（比如前端跑3000、后端跑8080），需要填写完整请求路径：

await axios.post('http://localhost:8080/api/v1/users/register', values)

嫌重复写路径麻烦的话，也可以全局配置Axios的baseURL，比如在项目src目录下新建axios.js：

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8080/api/v1';

之后就能直接用axios.post('/users/register', values)发起请求。

2. 确认后端路由配置 #

Server.js里的app.use('/api/v1/users', require('./routes/userRoute'));配置是正确的，注意检查userRoute.js的文件引用路径、userController的导入路径有没有拼写错误。

二、MongoDB连接问题排查 #

如果修正路径后仍有异常，或明确怀疑数据库连接问题，按以下步骤排查：

• 检查.env文件中的MongoDB连接字符串：本地数据库应为MONGO_URI=mongodb://localhost:27017/你的数据库名称；使用MongoDB Atlas的话，要复制官方提供的完整连接串，并替换用户名、密码。
• 确认connectDb.js的连接逻辑正确，示例代码如下：

  const mongoose = require('mongoose');
  const connectDb = async () => {
    try {
      const conn = await mongoose.connect(process.env.MONGO_URI);
      console.log(`MongoDB连接成功：${conn.connection.host}`.cyan.underline);
    } catch (err) {
      console.log(`数据库连接失败：${err.message}`.red.bold);
      process.exit(1);
    }
  }
  module.exports = connectDb;
  

• 本地MongoDB服务需处于启动状态：Windows可在系统服务中启动MongoDB；Mac可执行brew services start mongodb-community；使用Atlas的话，要将当前服务器/本地IP加入白名单。
• 查看后端启动日志，如果没有MongoDB连接成功的提示，要么是连接串错误，要么是connectDb函数未被正确调用。

三、额外检查项 #

• 确认后端确实运行在8080端口：Server.js中PORT=8080 || process.env.PORT，若.env中配置了PORT，会优先使用该值，别搞混端口。
• 打开浏览器Network面板，查看请求的URL、请求方法、携带参数是否正确；后端使用了morgan中间件，控制台会打印请求日志，可确认请求是否真的到达后端。
• 当前CORS配置app.use(cors())允许所有域名请求，开发环境没问题，生产环境记得限制允许的域名。

内容的提问来源于stack exchange，提问作者kshitij bramhecha