#Refused to set unsafe header "User-Agent"

9 messages · Page 1 of 1 (latest)

summer flame
#

I'm trying t build a summarize app that takes text from the user and summarizes it using the gpt api. however, im running into issue in my browser console when I click on the summarize button in my react application:

Refused to set unsafe header "User-Agent"

I've been following the openai npm docs, so I'm not sure what is wrong. Would appreciate some help. Here is my app.js code, which includes the request to the openai api:

# 
import './App.css';
import {Configuration, OpenAIApi} from "openai"
import {useState} from "react"
import logo from './logo.svg';
import axios from 'axios';

function App() {
  const [text, setText] = useState("" );
  const [summarizedText, setSummarizedText] = useState("")
  const [loading, setLoading] = useState(false)
  

  const configuration = new Configuration({
    apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36'
    }
  });

  const openai = new OpenAIApi(configuration)
  
  const ButtonSubmit = (event) => {
    setLoading(true);
    event.preventDefault();
    openai.createCompletion({
      model: "text-davinci-003",
      prompt: generatePrompt(text),
      temperature: 0.6,
      max_tokens: 100,
    })
    .then((res) => {
      if (res.status == 200) {
        setLoading(false);
        // setSummarizedText(res?.data?.choices[0]?.text);
        console.log(res?.data?.choices[0]?.text);
      }
    })
    .catch((err) => {
      console.log(err, "An error occured!")
    });
  };
  
 function generatePrompt(text) {
    return `Summarize this ${text}`
  }
  



export default App;
#

i have the api key stored in my .env file in my root directory

vale topaz
#

Try removing the headers object from the config

summer flame
# vale topaz Try removing the headers object from the config

Hm no that didn't fix it. I tried with axios and now I don't get the "refused to set unsafe header "User-agent", but I get an auth error in the browser console (POST https://api.openai.com/v1/completions 401)

import './App.css';
import {Configuration, OpenAIApi} from "openai"
import {useState} from "react"
import logo from './logo.svg';
import axios from 'axios';

function App() {
  const [text, setText] = useState("" );
  const [summarizedText, setSummarizedText] = useState("")
  const [loading, setLoading] = useState(false)
  

  const configuration = new Configuration({
    apiKey: process.env.REACT_APP_OPENAI_API_KEY,
  });

  const openai = new OpenAIApi(configuration)
  
  /* const ButtonSubmit = (event) => {
    setLoading(true);
    event.preventDefault();
    openai.createCompletion({
      model: "text-davinci-003",
      prompt: generatePrompt(text),
      temperature: 0.6,
      max_tokens: 100,
    })
    .then((res) => {
      if (res.status == 200) {
        setLoading(false);
        // setSummarizedText(res?.data?.choices[0]?.text);
        console.log(res?.data?.choices[0]?.text);
      }
    })
    .catch((err) => {
      console.log(err, "An error occured!")
    });
  };
  
  */
  
  
  const ButtonSubmit = (event) => {
    setLoading(true);
    event.preventDefault();
    const data = {
      model: "text-davinci-003",
      prompt: generatePrompt(text),
      temperature: 0.6,
      max_tokens: 100,
    };
    axios.post('https://api.openai.com/v1/completions', data, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
      },
    })
    .then((res) => {
      if (res.status === 200) {
        setLoading(false);
        setSummarizedText(res?.data?.choices[0]?.text);
      }
    })
    .catch((err) => {
      console.log(err, "An error occurred!")
    });
  };


  
 function generatePrompt(text) {
    return `Summarize this ${text}`
  }
vale topaz
#

Try something like this with axios?

var data = JSON.stringify({
  "model": "text-davinci-003",
  "prompt": "Say this is a test",
  "max_tokens": 7,
  "temperature": 0
});

var config = {
  method: 'post',
  url: 'https://api.openai.com/v1/completions',
  headers: { 
    'Content-Type': 'application/json', 
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});
summer flame
vale topaz
#

I auto generated that from the curl example you can still do 'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`

summer flame