使用Next.js+TypeScript调用OpenAI API时遇405请求方法不允许错误

核心原因 #

你的API路由文件错误使用了Next.js**中间件（middleware）**的写法，但这不是Pages Router中API路由的正确实现方式。Pages Router的API路由需要直接导出对应HTTP方法的处理函数（比如POST），当前写法会导致请求被错误拦截，最终返回405状态码。

修正后的API路由代码 #

修改pages/api/humanize.ts为以下内容：

// pages/api/humanize.ts
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { text } = req.body;

    try {
      const openAiResponse = await fetch('https://api.openai.com/v1/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
        },
        body: JSON.stringify({
          model: "text-davinci-003",
          prompt: text,
          temperature: 0.7,
          max_tokens: 2048,
        })
      });

      if (openAiResponse.ok) {
        const { choices } = await openAiResponse.json();
        const humanizedText = choices[0].text.trim();
        res.status(200).json({ humanizedText });
      } else {
        const error = await openAiResponse.json();
        res.status(openAiResponse.status).json({ error });
      }
    } catch (error: any) {
      console.error('Error calling OpenAI:', error);
      res.status(500).json({
        error: { message: error.message || 'An unknown error occurred' }
      });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

关键修改点 #

• 移除了middleware函数和config配置，改用Pages Router标准的handler函数导出
• 使用NextApiRequest/NextApiResponse类型替代NextRequest/NextResponse，适配Pages Router的API路由规范
• 直接通过req.body获取请求参数，无需手动解析JSON
• 用res.status().json()返回响应，替代NextResponse构造函数

额外检查项 #

• 确认process.env.OPENAI_API_KEY已在.env.local文件中正确配置，且重启了开发服务器
• 确认项目使用Pages Router（API文件位于pages/api目录下），若使用App Router，需将API路由放在app/api/humanize/route.ts并采用对应写法
• 客户端请求路径/api/humanize与API路由文件路径保持一致

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