Я пытаюсь получить доступ к openai api для реагирующего приложения. Я получаю сообщение об ошибке «небезопасный заголовок», ошибку 400, и в то же время «https://api.openai.com/v1/completions» отправляет мне сообщение о непредоставлении моего ключа API, хотя я предоставление ключа API через файл .env. Я не знаю, что делать, и мне интересно, что именно я сделал неправильно.
Это функция реагирования, которую я использую:
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
organization: "org-xut9Kn1LqNLyDiHEMAQlnJ0k"
});
const openai = new OpenAIApi(configuration);
const handleSuggestions = async (text) => {
const response = await openai.createCompletion({
model: "text-davinci-001",
prompt: "autocomplete this word, letter or sentence: " + text,
max_tokens: 100,
n: 1,
stop: text.length - 1,
temperature: 0.15,
});
console.info(response);
const data = await response.json();
setSuggestions(response.choices[0].text.split(' ').slice(text.split(' ').length - 1).join(' ').split(' '));
};
``
Я получаю сообщение об ошибке «небезопасный заголовок «User-Agent»», а также ошибку 400 от «https://api.openai.com/v1/completions» в консоли браузера при запуске приложения реакции. Это полное приглашение, которое я получаю от «https://api.openai.com/v1/completions»:
{
"error": {
"message": "You didn't provide an API key. You need to provide your API key in an Authorization header using Bearer auth (i.e. Authorization: Bearer YOUR_KEY), or as the password field (with blank username) if you're accessing the API from your browser and are prompted for a username and password. You can obtain an API key from https://platform.openai.com/account/api-keys.",
"type": "invalid_request_error",
"param": null,
"code": null
}
}
Пожалуйста, что я могу сделать, и что именно не так с кодом? Кроме того, надеюсь, что это считается «минимальным воспроизводимым примером», поскольку я новичок в переполнении стека.
Я импортировал его с помощью этой строки: 'import {Конфигурация, OpenAIApi} из "openai";' И включил его в функцию с помощью этой строки: 'const {Configuration, OpenAIApi} = require("openai");'
Итак, вы пытаетесь использовать openai-node в приложении React (на стороне клиента)? Библиотека, в которой конкретно говорится: «Важное примечание: эта библиотека предназначена только для использования на стороне сервера, так как ее использование в коде браузера на стороне клиента раскроет ваш секретный ключ API».
Я просто тестировал это сначала и пытался учиться. На данный момент это приложение не публикуется, поэтому я не пытался разделить его на внешний или внутренний интерфейс. Это причина, по которой он возвращает это приглашение? Потому что это приложение для реагирования на стороне клиента?
Да, библиотека и API не предназначены для использования на стороне клиента. API активно блокирует вас для вашей же безопасности
Вы должны делать запрос с сервера, а не с вашего клиента.
Ajax-запрос: Отказано в установке небезопасного заголовка
Я настоятельно рекомендую проверить Next.js 13, так как он использует React под капотом и позволяет создавать компоненты «Сервер», которые по сути изоморфны.
Вот пример файла Next.js 13 app/pages.tsx
:
const App = async () => {
console.info("App.js");
const results = await fetch(
`http://api.weatherapi.com/v1/forecast.json?key=<API_KEY>&q=Stockholm&days=6&aqi=no&alerts=no`
);
const json = await results.json();
console.info("json", json);
return (
<>
<h3>{json.location.name}</h3>
<p>{json.location.temp_c}</p>
<p>{json.location.localtime}</p>
</>
);
};
export default App;
Проверьте эту рабочую песочницу Next.js 13 / React18, которая затрагивает API погоды. Если вы хотите разветвить ее и посмотреть, работают ли ваши API-вызовы на сервере внутри этого app.pages.tsx
файла. В противном случае вам нужно будет использовать функцию Firebase или какой-либо внутренний сервер.
Для протокола, чтобы вы не были шокированы - все компоненты в папке app
по умолчанию Server Components
. Это означает, что есть некоторые ограничения — например, отсутствие useEffect
, useContext
и т. д. Next.js заставляет вас думать о вещах с точки зрения компонентов Client
и Server
. Я рекомендую прочитать его, если вам нравится React! beta.nextjs.org/docs --- Удачи
Можете ли вы дать ссылку на библиотеку, предоставляющую
OpenAIApi
иConfiguration
?