Я не знаю, почему я не могу получить доступ к API открытого ИИ для использования в реагирующем приложении

Я пытаюсь получить доступ к 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
    }
}

Пожалуйста, что я могу сделать, и что именно не так с кодом? Кроме того, надеюсь, что это считается «минимальным воспроизводимым примером», поскольку я новичок в переполнении стека.

Можете ли вы дать ссылку на библиотеку, предоставляющую OpenAIApi и Configuration?

Phil 10.02.2023 01:55

Я импортировал его с помощью этой строки: 'import {Конфигурация, OpenAIApi} из "openai";' И включил его в функцию с помощью этой строки: 'const {Configuration, OpenAIApi} = require("openai");'

udenx10 10.02.2023 01:57

Итак, вы пытаетесь использовать openai-node в приложении React (на стороне клиента)? Библиотека, в которой конкретно говорится: «Важное примечание: эта библиотека предназначена только для использования на стороне сервера, так как ее использование в коде браузера на стороне клиента раскроет ваш секретный ключ API».

Phil 10.02.2023 01:58

Я просто тестировал это сначала и пытался учиться. На данный момент это приложение не публикуется, поэтому я не пытался разделить его на внешний или внутренний интерфейс. Это причина, по которой он возвращает это приглашение? Потому что это приложение для реагирования на стороне клиента?

udenx10 10.02.2023 02:01

Да, библиотека и API не предназначены для использования на стороне клиента. API активно блокирует вас для вашей же безопасности

Phil 10.02.2023 02:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
5
182
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны делать запрос с сервера, а не с вашего клиента.

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 --- Удачи

Wesley LeMahieu 10.02.2023 02:23

Другие вопросы по теме