部署在Vercel上的Next.js动态路由API异常排查求助

针对你Next.js博客API部署到Vercel后，动态路由的单篇文章Get接口和编辑Put接口失效的问题，结合本地正常、仅线上异常的特征，可从以下几个方向排查：

1. 动态路由参数解析错误 #

• 如果你用的是Pages Router（pages/api/下的路由），动态参数是通过req.query.id获取的，而非req.params.id。如果代码里误用了req.params.id，本地可能因开发服务器的兼容逻辑正常，但Vercel部署后会取不到参数，导致接口返回404或空数据。
• 如果你用的是App Router（app/api/下的路由），参数在{ params }对象里，确保解构正确：export async function GET(request, { params }) { const id = params.id }。

2. Vercel缓存策略干扰动态接口 #

Vercel默认会缓存Get请求，可能导致动态获取单篇文章的接口返回旧数据或404。可以在API响应中添加缓存控制头禁用缓存：

// Pages Router 示例
export default function handler(req, res) {
  // 禁用缓存
  res.setHeader('Cache-Control', 'no-store, max-age=0');
  
  // 你的业务逻辑
  const post = getPostById(req.query.id);
  res.status(200).json(post);
}

// App Router 示例
export async function GET(request, { params }) {
  const post = getPostById(params.id);
  return new Response(JSON.stringify(post), {
    headers: {
      'Cache-Control': 'no-store, max-age=0',
    },
  });
}

3. CORS与请求方法限制 #

Put接口可能因Vercel的默认CORS配置被拦截，或未正确处理OPTIONS预检请求：

• 添加CORS响应头（生产环境建议指定具体域名，而非*）：

res.setHeader('Access-Control-Allow-Origin', 'https://your-blog-domain.vercel.app');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

• 处理OPTIONS请求，避免预检失败：

if (req.method === 'OPTIONS') {
  res.status(200).end();
  return;
}

4. 环境变量与数据库访问问题 #

• 检查Vercel项目设置中的环境变量是否和本地.env.local完全一致，尤其是数据库连接字符串、密钥等。Vercel不会自动读取本地.env文件，需手动添加。
• 确认数据库允许Vercel的IP访问：比如MongoDB Atlas需要将Vercel的IP段加入白名单，或临时设置为允许所有IP（仅用于测试）。

5. 文件命名与部署日志检查 #

• Vercel的文件系统区分大小写，本地Windows环境不区分，若动态路由文件名（如[id].js）大小写错误，部署后会导致路由无法匹配。
• 查看Vercel部署日志，检查API路由是否有构建错误（如语法错误、依赖缺失），这些错误可能在本地开发时被忽略，但部署时会导致接口失效。

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