部署在Vercel的Next.js应用API请求失败：如何使用自定义API端点？

1. 检查API路由的请求方法处理逻辑 #

确保/pages/api/beers/[[...params]].ts文件中完整处理了所有需要的HTTP方法，且在未匹配到方法时正确设置响应头：

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { method } = req

  switch (method) {
    case 'GET':
      // 编写GET请求处理逻辑
      res.status(200).json({ data: 'GET response' })
      break
    case 'POST':
      // 编写POST请求处理逻辑
      res.status(201).json({ data: 'POST success' })
      break
    case 'DELETE':
      // 编写DELETE请求处理逻辑
      res.status(200).json({ data: 'DELETE success' })
      break
    case 'PATCH':
      // 编写PATCH请求处理逻辑
      res.status(200).json({ data: 'PATCH success' })
      break
    default:
      // 必须设置Allow头，明确告知允许的请求方法
      res.setHeader('Allow', ['GET', 'POST', 'DELETE', 'PATCH'])
      res.status(405).end(`Method ${method} Not Allowed`)
  }
}

Vercel生产环境会严格校验Allow头与请求方法的匹配性，遗漏该头可能导致405错误。

2. 确保正确处理OPTIONS预检请求 #

浏览器会对非GET/HEAD的请求发送OPTIONS预检，必须在API路由中处理该请求：

// 在handler函数开头添加以下代码
res.setHeader('Access-Control-Allow-Origin', 'https://your-vercel-domain.vercel.app') // 生产环境指定具体域名，不要用*
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, PATCH, OPTIONS')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')

// 处理OPTIONS预检，直接返回200
if (req.method === 'OPTIONS') {
  res.status(200).end()
  return
}

如果依赖next.config.cjs的CORS配置生效不稳定，建议直接在API路由内手动设置头信息，或使用cors包统一处理：

npm install cors

搭配自定义中间件运行工具（utils/runMiddleware.ts）：

import type { NextApiRequest, NextApiResponse } from 'next'

export function runMiddleware(
  req: NextApiRequest,
  res: NextApiResponse,
  fn: Function
) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) return reject(result)
      return resolve(result)
    })
  })
}

在API路由中使用：

import cors from 'cors'
import { runMiddleware } from '../../utils/runMiddleware'

const corsMiddleware = cors({
  origin: 'https://your-vercel-domain.vercel.app',
  methods: ['GET', 'POST', 'DELETE', 'PATCH', 'OPTIONS']
})

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  await runMiddleware(req, res, corsMiddleware)
  // 后续请求方法处理逻辑...
}

3. 校验前端请求路径的正确性 #

部署到Vercel后，前端axios请求的路径必须与API路由路径完全匹配，同域下无需添加完整域名前缀：

// 正确写法
axios.post('/api/beers', requestData)

// 错误写法（同域下无需添加域名）
axios.post('https://your-domain.vercel.app/api/beers', requestData)

4. 排查Vercel部署细节 #

• 确认Vercel控制台的环境变量已正确配置（注意区分生产/预览环境）；
• 查看Vercel部署日志，搜索API路由相关报错，排查是否有代码逻辑错误导致请求处理失败；
• 验证动态路由参数解析：确保req.query.params的处理逻辑正确，避免因参数解析错误导致请求进入default分支返回405。

内容的提问来源于stack exchange，提问作者m3.b