Mac运行React应用时Axios报404错误求助

一、先确认后端服务状态 #

1. 检查后端服务是否正常启动：

   • 启动后端时，终端必须输出Server is running，如果没有，说明服务启动失败，查看终端报错（比如依赖缺失、EncryptionHandler.js不存在、端口被占用）。
   • 用Mac终端命令检查3001端口是否被占用：lsof -i :3001，如果有其他进程占用，杀掉进程（kill -9 <PID>）后重启后端。

2. 验证后端接口是否可用：

   • 用curl直接测试接口，比如：

     curl http://localhost:3001/showpasswords
     curl -X POST -H "Content-Type: application/json" -d '{"password":"test","title":"test"}' http://localhost:3001/addpassword
     

   • 如果curl也返回404，说明后端路由配置有问题，或者服务根本没在3001端口监听。

二、排查MySQL连接问题 #

你的后端代码只创建了连接，但没有监听连接错误，可能MySQL根本没连上，导致接口执行查询时报错但没反馈：

1. 在后端代码中添加连接状态监听：

   const db = mysql.createConnection({
       user: "root",
       host: "localhost",
       password: "password", // 确认这个密码和你Mac上MySQL的root密码一致
       database: "PasswordManager",
   });
   
   // 新增这行代码
   db.connect((err) => {
       if (err) {
           console.error("MySQL连接失败:", err);
           return;
       }
       console.log("MySQL连接成功");
   });
   

2. 确认数据库和表存在：
   • 登录MySQL，检查PasswordManager数据库是否存在，passwords表是否有id、password、title、iv这几个字段，字段类型是否匹配（比如iv是字符串类型）。

三、前端代码补全错误处理 #

当前前端Axios请求没有错误捕获，无法看到具体失败原因，修改如下：

// useEffect中的get请求
useEffect(() => {
  Axios.get("http://localhost:3001/showpasswords")
    .then((response) => {
      setPasswordList(response.data);
    })
    .catch(err => {
      console.error("获取密码列表失败:", err); // 查看控制台错误详情
    });
}, []);

// addPassword函数
const addPassword = () => {
  Axios.post("http://localhost:3001/addpassword",  {
    password: password, 
    title: title,
  })
  .then(res => {
    console.log("添加成功:", res.data);
    // 成功后重新拉取列表
    Axios.get("http://localhost:3001/showpasswords").then(r => setPasswordList(r.data));
  })
  .catch(err => {
    console.error("添加密码失败:", err);
  });
};

四、检查依赖与文件完整性 #

1. 后端项目根目录执行npm install，确保express、mysql、cors都已安装，没有报错。
2. 确认EncryptionHandler.js文件存在，且encrypt、decrypt函数能正常工作——如果这个文件缺失或函数报错，后端服务启动会失败，直接导致所有接口404。

五、额外注意点 #

• Mac上的MySQL默认端口是3306，你的后端配置用的是默认值，没问题，但如果你的MySQL改了端口，需要在mysql.createConnection里添加port: 自定义端口。
• 如果你用的是MAMP等MySQL管理工具，确认服务是启动状态，且root密码和后端配置一致。

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