MERN Stack项目请求http://localhost:5000 API偶发404错误求助

问题根因及修复方案 #

1. 前端请求URL缺失HTTP协议 #

你的axios请求写的是localhost:5000/movies/，缺少http://前缀，浏览器会默认将其识别为当前前端页面域名下的相对路径，比如前端运行在3000端口时，实际请求地址会变成http://localhost:3000/localhost:5000/movies/，直接触发404错误。
修复方法：修改请求代码为：

const getMovies = async() => { 
    await axios.get('http://localhost:5000/movies/')
            .then(res=>{ console.log(res.data); setMovies(res.data) }) 
            .catch(err=>console.log(err)) 
    console.log(movies) 
}

2. 端口占用导致服务偶发异常 #

你提到无代码改动时接口有时可用有时不可用，甚至其他历史正常项目也出现同样问题，大概率是5000端口被其他进程占用，要么导致你的Express服务没有正常启动成功，要么后台存在残留的旧Node进程监听5000端口，没有对应路由规则所以返回404。
排查修复步骤：

• 关闭当前运行的所有Node服务：Windows系统执行taskkill /f /im node.exe，Mac/Linux执行killall node
• 检查5000端口占用：Windows执行netstat -ano | findstr :5000，Mac/Linux执行lsof -i :5000，如果有其他进程占用，可以更换服务启动端口（比如改成5001），或者结束占用端口的进程
• 特殊说明：MacOS Monterey及以上版本系统的AirPlay接收器默认占用5000端口，可以在系统设置-通用-AirDrop与Handoff中关闭AirPlay接收器释放端口。

3. 路由冗余优化（可选） #

你将movieRouter挂载在/movies路径下，路由文件中又定义了/movies的GET接口，实际访问路径为/movies/movies，该接口目前没有被调用，属于冗余代码，可以根据业务需要保留或删除。

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