接口调用返回404常见原因排查指南

做前后端联调时，最让人头疼的不是报错，而是接口明明写了，却返回 404。页面打不开还能看到提示，这个 404 就像石沉大海，啥也不说。其实别慌，多数情况是配置或路径的问题。

最常见的原因就是 URL 写错了。比如后端接口是 /api/v1/user/info，前端调成了 /api/user/info，少了个版本号，直接 404。特别是开发环境和生产环境地址不一样时，容易混淆。

打开浏览器开发者工具，看 Network 面板里实际发出的请求地址是不是你预期的那个。有时候代理没配好，本地请求被转发到了错误的服务上。

Spring Boot 项目里，写了个 @GetMapping("/data")，但 Controller 类忘了加 @RestController 或者类上的 @RequestMapping 路径拼错了，也会导致接口根本没注册到路由表里。

Node.js 的 Express 应用也一样，如果路由中间件没挂载，比如：

const express = require('express');
const app = express();

// 忘了这行
app.use('/api', require('./routes/data'));

app.listen(3000);

那所有 /api/xxx 的请求都会落到默认 404 上。

线上环境通常用 Nginx 做反向代理。假如接口应该走 /api/ 转发到后端服务，但配置写成了：

location /api {
    proxy_pass http://backend;
}

看起来没问题，但如果后端服务实际监听的是 /service/api，那就差了一层路径，结果就是 404。改成：

location /api/ {
    proxy_pass http://backend/;
}

注意末尾的斜杠，它决定了路径是否拼接。

虽然本质不是 404，但浏览器在预检失败时，有时会显示为 404 或网络错误。尤其是 CORS 没开，或者允许的域名、方法没配全，前端发出去的 OPTIONS 请求被拦截，后续请求就不会执行。

这时候看 Network 里有没有 OPTIONS 请求，状态是不是 200。如果不是，问题可能出在跨域策略上，而不是接口不存在。

Vue 或 React 打包部署后，通常由 Nginx 提供静态页面服务。如果路由模式用的是 history 模式，访问 /user/profile 时，服务器会去找对应的文件，找不到就返回 404。

正确做法是配置 fallback，把非静态资源请求都指向 index.html：

location / {
    try_files $uri $uri/ /index.html;
}

否则刷新页面直接 404，调接口自然也失败。

遇到接口返回 404，别急着重启服务。一步步查请求链路：前端地址 → 代理规则 → 后端路由 → 实际服务状态，往往一眼就能定位问题。

接口调用返回404？可能是这些地方出了问题