调用OpenAI API返回空响应及流式输出实现咨询

你直接把openai-edge返回的Response对象传给res.send()了，这个库的createChatCompletion方法返回的是标准的Fetch API Response实例，并非解析后的JSON数据。直接发送该对象会被Next.js序列化成空结构，导致前端收到{"answer": {}}。

修复方式：先解析Response的JSON内容再返回：

// 替换原有的res.status(200).send(completion);
const data = await completion.json();
res.status(200).send(data);

要实现流式输出，需修改三个核心部分：

• 调用createChatCompletion时开启stream: true
• 设置响应头为text/event-stream并禁用缓存
• 读取响应数据流，逐段转发给客户端

修改后的完整代码：

import {
    ChatCompletionRequestMessageRoleEnum,
    Configuration,
    OpenAIApi,
} from "openai-edge";
import config from "../../config";
import { NextApiRequest, NextApiResponse } from "next";

const openAIConfig = new Configuration({ apiKey: config.openAIKey });
const openAI = new OpenAIApi(openAIConfig);

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<any>
) {
    let messages = [
      {
        role: ChatCompletionRequestMessageRoleEnum.System,
        content: "Hello, I'm a chatbot",
      },
      {
        role: ChatCompletionRequestMessageRoleEnum.User,
        content: "Hello, is Pluto really a planet?",
      },
    ];
    const completion = await openAI.createChatCompletion({
      model: "gpt-3.5-turbo",
      stream: true, // 开启流式输出
      messages,
    });

    // 设置流式响应头
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    const reader = completion.body?.getReader();
    const decoder = new TextDecoder();

    if (!reader) {
        res.status(500).send('Failed to get response stream');
        return;
    }

    try {
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            const chunk = decoder.decode(value);
            // 拆分并处理SSE格式的数据块
            chunk.split('\n\n').forEach(line => {
                if (line.startsWith('data: ')) {
                    const data = line.slice(6);
                    if (data !== '[DONE]') {
                        res.write(`data: ${data}\n\n`);
                    }
                }
            });
        }
    } catch (error) {
        console.error('Stream error:', error);
    } finally {
        res.end();
    }
}

注意事项：

• 流式响应会保持连接直到所有数据发送完毕，需确保服务器支持长连接
• 客户端需通过EventSource或自定义fetch逻辑监听message事件接收分段数据
• 要处理[DONE]标记，该标记表示流式输出结束

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