Vue前端调用后端API失败求助：404错误排查

核心问题1：前端未使用配置好的代理路径 #

你当前的API调用直接请求http://127.0.0.1:5000，完全绕过了Vite配置的代理规则，这会触发浏览器跨域限制（即使后端配置了CORS，也可能因环境差异出现异常），同时若Docker容器网络配置变动，直接访问127.0.0.1可能无法正确指向容器内服务。

修复方法：修改API调用代码 #

将前端Axios请求改为使用代理前缀/api：

// 原代码
const response = await axios.post("http://127.0.0.1:5000/users/login?email=" + code);

// 修改后代码
const response = await axios.post("/api/users/login?email=" + code);

Vite会自动将带有/api前缀的请求转发到http://127.0.0.1:5000，并通过rewrite规则去掉/api前缀，最终请求路径与Postman一致。

核心问题2：Docker容器端口映射验证 #

虽然Postman能正常请求，仍需确认Docker容器是否正确将内部5000端口映射到主机的5000端口：

1. 执行docker ps命令，查看目标容器的端口映射列，确认存在0.0.0.0:5000->5000/tcp或127.0.0.1:5000->5000/tcp的配置。
2. 若没有此配置，重启容器时添加端口映射参数：

docker run -p 5000:5000 [你的容器镜像名/ID]

额外排查步骤 #

1. 重启前端开发服务器：确保Vite代理配置生效，避免旧配置缓存。
2. 清除浏览器缓存：使用Ctrl+Shift+R强制刷新页面，清除旧请求缓存。
3. 核对后端路由：确认NestJS的/users/login路由是否正确注册（Postman能成功则大概率无问题，可快速核对控制器代码）。

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