Node.js+React+MySQL登录页出现404错误求助

以下是导致登录功能404的核心问题及对应修复：

1. Axios请求未指定POST方法 #

React登录逻辑中，axios请求默认使用GET方法，但后端登录接口是POST /auth/login，GET请求找不到对应路由，直接返回404。

修复（login.jsx）：

// 原代码
// const response = await axios('http://localhost:3001/auth/login', { email,password });

// 修改为指定POST方法
const response = await axios.post('http://localhost:3001/auth/login', { email,password });

2. 表单默认提交行为与自定义逻辑冲突 #

表单设置了action="/auth/login" method="POST"，点击提交时会直接绕过自定义的handleSubmit函数，向React所在端口（通常是3000）发送请求，而非后端的3001端口，导致路径不匹配出现404。

修复（login.jsx）：
移除表单的action和method属性，完全由自定义handleSubmit处理请求：

// 原代码
// <form action="/auth/login" method="POST">

// 修改为
<form onSubmit={handleSubmit}>

3. 社交登录路由缺少/auth前缀 #

后端的社交登录路由（如naver-login）挂载在/auth路径下，实际访问路径应为/auth/naver-login，但React中的Link直接指向/naver-login，路径不匹配导致404。

修复（login.jsx）：
给所有社交登录的Link添加/auth前缀：

// 原代码
// <Link to="/naver-login">
// <Link to="/apple-login">
// <Link to="/kakao-login">

// 修改为
<Link to="/auth/naver-login"><img src="/Photo/naverLogin.png" alt="naver login" /></Link>
<Link to="/auth/apple-login"><i className="fab fa-apple"></i></Link>
<Link to="/auth/kakao-login"><img src="/Photo/kakaoLogin.png" alt="kakao login" /></Link>

4. 后端登录接口的Promise未正确等待 #

User.findOne返回的是Promise对象，未添加await就直接判断!user，会导致逻辑错误（user永远为Truthy值），虽不直接导致404，但会引发后续登录失败问题。

修复（login.js）：

// 原代码
// const user = User.findOne({where: {email}});

// 修改为添加await
const user = await User.findOne({where: {email}});

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