Angular升级后OpenAI Node.js SDK v3转v4返回null无报错问题排查

问题描述 #

将应用从Angular 15搭配"openai": "^3.2.1"升级至Angular 17搭配"openai": "^4.24.1"，参考官方文档修改代码后，调用接口仅返回[null]，无任何报错。已创建新API密钥，且密钥显示最近使用时间为1月12日。

旧版本（OpenAI v3）代码 #

import { Configuration, OpenAIApi } from 'openai';
readonly configuration = new Configuration({
  organization: environment.openAIOrganization,
  apiKey: environment.openAIToken,
});

readonly openai = new OpenAIApi(this.configuration);

//#region -- GENERATE CHATGPT MSG --
async getDataFromOpenAI(text: string): Promise<any> {
  try {
    const completion = await this.openai.createCompletion({
      model: "text-davinci-003",
      prompt: text,
      temperature: 0.9,
      max_tokens: 62,
    },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + environment.openAIToken,
          'Access-Control-Allow-Origin': '*'
        }
      })

    return completion.data.choices[0].text
  }
  catch (error) {
    console.error('error.message', error);
  }
}
//#endregion

新版本（OpenAI v4）代码 #

import OpenAI from 'openai';

async generateSms() {
  try {
    let completion = await this.openai.completions.create({
      model: 'gpt-3.5-turbo-instruct',
      prompt: 'Create a happy birthday message',
      temperature: 0.5,
    });
    console.log(completion);
    console.log(completion.choices[0].text);
  } catch (e) {
    console.error('generateSms => ', e);      
  }
} 

问题原因及解决方法 #

核心问题 #

1. OpenAI实例未完成初始化配置：新版本代码仅导入了OpenAI类，但未创建实例并传入API密钥、组织ID等必要认证信息，导致请求未携带有效凭证，接口返回空值。
2. 浏览器端跨域限制：OpenAI官方禁止在浏览器客户端直接调用API（会触发CORS拦截），旧版本中手动添加的Access-Control-Allow-Origin: *无效——该响应头只能由服务端设置，客户端配置不生效。旧版本可能通过代理绕过了跨域，升级后代理配置未同步。

解决步骤 #

1. 正确初始化OpenAI实例

在v4版本中，必须实例化OpenAI并传入配置参数：

import OpenAI from 'openai';

// 在组件/service的构造函数或初始化逻辑中创建实例
readonly openai = new OpenAI({
  apiKey: environment.openAIToken,
  organization: environment.openAIOrganization,
  // 后续配置代理后，需指向代理路径
  baseURL: '/api/openai'
});

2. 配置Angular代理（必须）

通过后端代理转发OpenAI请求，绕过浏览器跨域限制：

• 创建代理配置文件proxy.conf.json：

{
  "/api/openai": {
    "target": "https://api.openai.com/v1",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api/openai": ""
    }
  }
}

• 在angular.json中关联代理配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}

3. 补充关键请求参数

默认max_tokens值可能过小导致无内容返回，建议显式设置：

async generateSms() {
  try {
    let completion = await this.openai.completions.create({
      model: 'gpt-3.5-turbo-instruct',
      prompt: 'Create a happy birthday message',
      temperature: 0.5,
      max_tokens: 100 // 确保返回足够长度的内容
    });
    console.log(completion.choices[0].text);
  } catch (e) {
    console.error('generateSms => ', e);      
  }
} 

4. 排查认证问题

若仍未解决，检查：

• 环境变量openAIToken和openAIOrganization是否正确加载
• API密钥是否拥有completions接口的调用权限
• 查看浏览器Network面板，确认请求头是否携带了有效Authorization字段，以及响应的详细内容

内容的提问来源于stack exchange，提问作者Diego Venâncio