next.js - 即使我在将 Next.js 网站与 ChatGPT 链接时收到响应，为什么还是收到 401 错误？

Question

我正在尝试将 ChatGPT 合并到我的电子商务网站中，将其用作聊天机器人。我导入了 openAI 并添加了一个函数，该函数向 ChatGPT 发送消息，然后控制台记录响应。使用 npm run dev 运行网站后，我在终端中收到响应，但浏览器收到 401 错误。由于 401 错误是因为缺少身份验证凭据，我如何才能收到响应？当我尝试使用 useState 在页面上呈现响应时，它不起作用。我似乎只能在终端中得到响应。当我在其他非 Next.js 应用程序中使用凭据时，它确实有效。我的 api key 位于站点根文件夹中的 .env.local 文件中。浏览器中的 401 错误状态为: Unhandled Runtime Error Error: Request failed with status code 401 Call Stack createError node_modules/axios/lib/core/createError.js (16:0) Settle Node_modules/axios/lib/core/settle.js (17:0) XMLHttpRequest.onloadend node_modules/axios/lib/adapters/xhr.js (66:0) - 我发现这很令人困惑，因为我没有使用 axios。

`import { Configuration, OpenAIApi } from "openai";

const openai = new OpenAIApi(
new Configuration({
apiKey: process.env.API_KEY,
})
);

openai
.createChatCompletion({

model: "gpt-3.5-turbo", 
messages: [
{
  role: "user",
  content:
    "Hello ChatGPT, how are you?",
},
], 
})
.then((res) => {
console.log(res.data.choices[0].message.content); 
}); 


const Stylebot = () => {
return (
<>
  <p>Test ChatGPT</p>
</>
);
};

export default Stylebot;`

Answer 1

听起来您的 token 有问题。我建议你做这样的事情来弄清楚发生了什么:

.then((res) => {
console.log(res.data.choices[0].message.content); 
}).catch(err => {
console.log({err})
}); 

我还建议您尝试打印 process.env.API_KEY - 最可能的问题是您的应用程序无法读取它。如果是这种情况，请使用 dotenv 包将其添加到您的环境中。