前端Axios请求遇404错误，配置代理后仍无法正常调用API

问题现象 #

前端React代码中使用Axios发送POST请求/api/users/signin时返回404错误，请求地址显示为http://localhost:3000/api/users/signin，但通过VSCode REST Client直接调用http://localhost:5000/api/users/signin可正常获取响应，且已在package.json中配置"proxy": "http://localhost:5000"。

相关前端代码：

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
  
const submitHandler = async (e) => {
  e.preventDefault();
  try {
    console.log(username, password)
    const { data } = await axios.post('/api/users/signin', {
      username,
      password,
    });
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

排查与解决步骤 #

1. 确认代理配置生效 #

• 检查package.json中的proxy配置是否拼写正确，端口号和后端服务一致：

  "proxy": "http://localhost:5000"
  

• 配置代理后必须重启前端开发服务器，否则新配置不会生效。

2. 检查Axios全局baseURL配置 #

如果项目中给Axios设置了全局baseURL，会覆盖代理规则，查看是否有类似代码：

axios.defaults.baseURL = 'http://localhost:3000';

若存在，修改为后端地址或删除该配置，让代理生效。

3. 验证后端路由匹配 #

• 确认后端/api/users/signin路由的请求方法为POST，路径完全匹配（注意斜杠、大小写问题）。
• 检查后端服务是否正常运行在localhost:5000端口。

4. 直接使用完整地址测试 #

临时修改Axios请求地址为后端完整地址，验证请求是否正常：

const { data } = await axios.post('http://localhost:5000/api/users/signin', {
  username,
  password,
});

如果请求成功，说明代理配置未生效，回到第一步重新检查。

5. 查看浏览器网络请求详情 #

打开浏览器开发者工具Network面板，查看请求的实际跳转地址：

• 若请求仍指向localhost:3000，说明代理未生效；
• 若跳转至localhost:5000仍404，需重点排查后端路由配置。

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