Next.js API路由本地正常但生产环境报404错误求助

排查API路由404核心原因 #

1. 确认Vercel部署文件结构 #

检查Vercel部署日志，确保app/api/invoice/[id]/route.ts文件已被正确上传。如果.gitignore中包含app/api相关目录，或部署时遗漏该文件，会直接导致API路由不存在，返回404。

2. 修正API路由的ID获取逻辑 #

当前通过request.url.split("/").pop()获取ID的方式存在隐患：若URL带查询参数（如/api/invoice/abc?foo=bar），pop()会返回bar而非目标IDabc，可能引发业务逻辑错误。改用Next.js官方推荐的params参数更可靠：

import { retrieveInvoice } from "@/service/invoiceService";
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  const data = await retrieveInvoice(params.id);
  return NextResponse.json(data); // 自动配置Content-Type，写法更简洁
}

3. 检查自定义域名的Vercel配置 #

你已将example.vercel.app重定向到example.com，需确认：

• 自定义域名已正确绑定到Vercel项目，且无错误的路径重定向规则（比如误将/api/*路径也重定向到其他地址）。
• 域名解析记录（CNAME/A记录）已正确指向Vercel，且DNS已生效。

解决CORS问题 #

直接访问example.vercel.app触发CORS是浏览器同源策略限制导致的，由于你已将流量重定向到自定义域名，禁止直接调用Vercel默认域名的API：

• 保持客户端代码中的相对路径调用（/api/invoice/${invoiceId}），Next.js会自动根据当前域名拼接完整URL。
• 若需使用绝对路径，确保使用自定义域名https://example.com/api/invoice/${invoiceId}，而非Vercel默认域名。

额外验证步骤 #

1. 在Vercel控制台的「Functions」页面，确认api/invoice/[id]函数已部署成功。
2. 直接在浏览器地址栏访问https://example.com/api/invoice/abc，检查是否返回预期JSON数据，而非404页面。
3. 排查retrieveInvoice函数是否存在异常，但如果是函数内部错误，通常会返回500而非404，因此优先确认路由存在性问题。

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