关于APIConnectionError： Connection error在JavaScript的最新解决方案

TL;DR: 使用 axios 和 dotenv 解决 APIConnectionError 问题。

问题描述：

在本地服务器运行 Next.js 项目时，调用 OpenAI API 或 Hugging face API 会报错 APIConnectionError: Connection error。调用 Hugging Face 的其他模型 API 时，同样报错。然而，部署在 Vercel 上可以正常运行。

项目环境：

  • 编程语言：JavaScript 和 TypeScript
  • 框架：Next.js 和 React
  • 地理位置：中国大陆

错误原因分析

错误原因分析：

通过谷歌查询，初步判断是 Node.js 的代理问题。附 OpenAI 官方文档：APIConnectionError

尝试过的解决方案（无效）：

  1. 在 powershell 上配置代理

    1
    2
    3
    $env:HTTP_PROXY="http://127.0.0.1:33210"
    $env:HTTPS_PROXY="http://127.0.0.1:33210"
    $env:ALL_PROXY="socks5://127.0.0.1:33211"

    但发现这样配置了之后，仍然出现APIConnectionError: Connection error报错。

  2. 很多解决方案通过修改 openai 的 Python 库来解决，但是无法用在JavaScript 和 Next.js上。

解决方案概述：

使用axios 和dotenv即可解决问题，以下是具体步骤：

1.在 Next.js 项目中安装 axios 和 dotenv：

1
npm install axios dotenv

2.在需要调用API的场景，使用axios进行API请求，并同时配置代理。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import * as fs from 'fs';
import * as path from 'path';
import axios from 'axios';
import * as dotenv from 'dotenv';

dotenv.config();

async function query(filePath: string) {
  try {
    const data = fs.readFileSync(filePath); // 读取文件内容
    const response = await axios.post(
      'https://api-inference.huggingface.co/models/openai/whisper-tiny',
      data, // 文件内容作为请求体
      {
        headers: {
          "Accept":"application/json",
          Authorization: `Bearer hf_xxxxxxxxxxxxxxxxxxxxxxxxxx`,
          'Content-Type': 'audio/wav', // 确保内容类型是音频文件
        },
        proxy: {
          protocol: 'http',
          host: '127.0.0.1',
          port: 33210,// 这里应该根据使用的代理，修改成相应的port
        },
        timeout: 10000, // 设置超时时间为10秒
      }
    );
    return response.data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.error('Axios error:', error.response?.data);
    } else {
      console.error('Unexpected error:', error);
    }
    throw error;
  }
}

// 调用函数并传入文件路径
query(path.resolve(__dirname, "C:\\Users\\caoca\\Music\\sample1.wav"))
  .then((response) => {
    console.log(JSON.stringify(response));
  })
  .catch((error) => {
    console.error(error);
  });

结论：

通过使用 axios 和 dotenv，可以有效解决 Next.js 项目中调用 OpenAI API 或 Hugging face API 报错的问题，提升开发体验和项目的稳定性。