NestJS路由已映射，React前端调用本地后端却出现404错误

本地搭建的NestJS后端已完成路由映射（截图显示存在POST /auth/register和POST /auth/login路由），使用Insomnia发起API调用可正常访问，但React应用调用时返回404错误（截图显示请求URL为http://localhost:3000/api/auth/register，状态码404）。以下是排查及解决方法：

1. 修正请求URL与后端路由的匹配问题 #

从截图可见，React请求路径多了/api前缀，但NestJS实际映射的路由是/auth/register，二者不匹配导致404。有两种解决方式：

• 方式一：修改React请求地址，去掉/api前缀，直接请求/auth/register
• 方式二：在NestJS中添加全局路由前缀，让后端接口统一带上/api：

// main.ts
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('api'); // 全局添加/api前缀
  await app.listen(3000);
}
bootstrap();

2. 配置React代理处理跨域与路径 #

如果React运行在不同端口（如默认的5173），直接请求后端地址会触发浏览器跨域限制，且容易写错路径。在React项目的package.json中添加代理配置：

"proxy": "http://localhost:3000"

配置后，React中可直接用/auth/register发起请求，会自动转发到NestJS后端。

3. 开启NestJS的CORS支持 #

浏览器会拦截跨域请求，Insomnia不受此限制，但React在浏览器环境下会触发CORS校验，可能表现为404（实际为CORS错误，可在浏览器控制台Console标签查看具体提示）。在NestJS的main.ts中开启CORS：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors(); // 开发环境允许所有来源，生产环境建议配置具体允许的域名
  await app.listen(3000);
}
bootstrap();

4. 确认请求方法是否匹配 #

检查React中的请求方法是否为POST，若误写为GET，会因后端无对应GET路由返回404。示例Axios请求：

// 正确的POST请求示例
axios.post('/auth/register', { /* 请求体数据 */ })
  .then(response => console.log(response))
  .catch(error => console.error(error));

5. 核对后端运行端口 #

确保React请求的端口与NestJS实际运行的端口一致，比如NestJS监听3000端口，React请求就不能指向3001端口。

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