Express服务器POST请求失败：Cannot POST /auth/login及404错误求助

一、解决接口404错误 #

前后端接口路径不匹配是导致404的核心原因：后端路由前缀为/api/auth，但前端请求时缺少/api前缀。

1. 修改Register.js的请求路径 #

找到handleSubmit中的axios请求，补充/api前缀：

// 原代码
await axios.post("/auth/register", inputs);
// 修改后
await axios.post("/api/auth/register", inputs);

2. 修正AuthContext中login方法的请求路径 #

确保AuthContext里的login函数请求路径为/api/auth/login（示例参考）：

// 假设AuthContext中的login实现
const login = async (inputs) => {
  const res = await axios.post("/api/auth/login", inputs);
  // ...其他逻辑
};

3. 移除form标签无效的action属性 #

Login和Register组件中的form标签action="/"属于冗余配置（已通过e.preventDefault()阻止默认提交），建议移除：

// 原代码
<form action="/" method="post">
// 修改后
<form>

二、修复bcrypt未导入问题 #

auth控制器中bcrypt的导入被注释，导致密码哈希和验证逻辑报错：

1. 取消bcrypt导入注释 #

打开controllers/auth.js，取消bcrypt的导入注释：

// 原代码
//import bcrypt from "bcrypt";
// 修改后
import bcrypt from "bcrypt";

2. 安装bcrypt依赖 #

如果未安装bcrypt，执行命令：

npm install bcrypt

三、修复deletePost方法的拼写错误 #

post控制器中存在两处拼写错误：

1. 修正json方法拼写 #

// 原代码
if(err) return res.status(403).josn("You can delete on your post!");
// 修改后
if(err) return res.status(403).json("You can only delete your own post!");

2. 修正单词拼写（可选） #

将"Token is not vaild!"改为"Token is not valid!"：

// 原代码
if(err) return res.status(403).json("Token is not vaild!")
// 修改后
if(err) return res.status(403).json("Token is not valid!")

四、其他潜在问题修复 #

1. 完善数据库连接验证 #

在db.js中添加连接状态验证，确保数据库正常连接：

import mysql from "mysql";

export const db= mysql.createConnection({
    host:"localhost",
    user:"root",
    password:"hideforsecuritypurpose",
    database:"blogapp"
})

// 添加连接验证
db.connect((err) => {
  if (err) {
    console.error("Database connection failed: ", err);
    return;
  }
  console.log("Connected to database successfully!");
});

2. 修正服务器启动日志 #

index.js中的日志提示不准确，修改为：

app.listen(PORT, () =>{
    console.log(`Server running on port ${PORT}`);
})

3. 移除Login组件无效属性 #

密码输入框的password="password"属性无效，删除该属性：

// 原代码
<input
  type="password"
  name="password"
  password="password"
  placeholder="Password"
  onChange={handleChange}
/>
// 修改后
<input
  type="password"
  name="password"
  placeholder="Password"
  onChange={handleChange}
/>

内容的提问来源于stack exchange，提问作者Arif Shahriyar Nader