Express JS接口接收Axios带参POST请求返回404问题求助

咱们一步步排查这个404错误的根源，然后逐个解决：

1. 优先排查跨域（CORS）问题（最常见诱因） #

你的前端React默认跑在3000端口，后端Express在3001端口，属于跨域请求。浏览器会先发送一个OPTIONS预检请求到/login路由，但你的后端没处理这类请求，导致预检请求被404中间件捕获，最终POST请求直接失败。

解决方法：配置CORS中间件 #

• 先在后端安装cors包：

npm install cors

• 然后在后端App.js中引入并启用，注意要放在所有路由之前：

const express = require('express'); 
const app = express() 
const PORT = process.env.PORT || 3001 
const bodyParser = require('body-parser') 
const mysql = require('mysql'); 
// 新增：引入cors
const cors = require('cors');

// 新增：启用跨域支持
app.use(cors());

const bdd = mysql.createConnection({ 
  host : 'localhost', 
  user : 'root', 
  password : 'root', 
  database: 'football' 
}); 
bdd.connect(); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 

// LOGIN 路由
app.post('/login',(req,res)=>{ 
  const mail = req.body.mail 
  const password = req.body.password 
  // 这里先留个坑，后面说SQL注入的问题
  bdd.query(`SELECT * FROM user WHERE mail = '${mail}' AND password = '${password}'`, function(err, row, field){ 
    if(err) {
      // 新增：处理数据库错误，避免请求挂起
      return res.status(500).json({error: err.message});
    }
    res.send(row) 
  }) 
}) 

app.use((req,res,next)=>{ 
  res.status(404); 
  res.json({code:'NOT_FOUND',message:'Page not found'}); 
}); 

// 新增：打印启动日志，确认端口是否正确
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
}) 
module.exports = app 

2. 确认后端端口与前端请求地址匹配 #

启动后端后，看控制台输出的端口号（比如上面新增的Server running on port 3001），确保前端Axios请求的地址完全对应：

axios.post('http://127.0.0.1:3001/login', { ... })

如果后端实际运行在其他端口（比如环境变量PORT被修改），前端请求的端口也要同步调整。

3. 检查路由顺序与拼写 #

• 你的代码里/login路由已经放在404中间件之前，这部分没问题，但要确保没有其他路由中间件（比如app.use('*')）提前拦截了请求。
• 路由拼写要完全一致：Express路由区分大小写，比如前端请求/Login会和后端/login不匹配，直接返回404。

4. 确保前端正确触发请求 #

你的Login组件只定义了login方法，但没看到触发它的UI元素。补充输入框和按钮，确保请求能被发起：

class Login extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { mail: '', password: '' }; // 初始值设为空字符串更合理
  }

  handleInputChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }

  login = () => { 
    if(this.state.mail && this.state.password){ // 简化非空判断
      axios.post('http://127.0.0.1:3001/login',{ 
        mail : this.state.mail, 
        password : this.state.password 
      }).then(res=>{ 
        console.log(res); 
      }).catch(err => {
        // 新增：捕获错误，方便排查问题
        console.error('Login failed:', err);
      }); 
    } 
  }

  render() {
    return (
      <div>
        <input
          type="email"
          name="mail"
          value={this.state.mail}
          onChange={this.handleInputChange}
          placeholder="Enter your email"
        />
        <input
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.handleInputChange}
          placeholder="Enter your password"
        />
        <button onClick={this.login}>Submit Login</button>
      </div>
    );
  }
} 

重要安全提醒：修复SQL注入漏洞 #

你的后端直接把用户输入拼接到SQL语句里，这是严重的安全隐患！一定要用参数化查询替换：

// 替换原来的query写法
bdd.query('SELECT * FROM user WHERE mail = ? AND password = ?', [mail, password], function(err, row, field){ 
  if(err) {
    return res.status(500).json({error: err.message});
  }
  res.send(row) 
}) 

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