Refused to set unsafe header "User-Agent" (프런트엔드/클라이언트 측에서 OpenAI를 호출하는 경우 발생하는 오류)

chatgpt api를 이용해서 내 웹사이트에서 chatgpt에 질문을하고 답변을 받을수 있는 기능을 넣었는데,

질문을 하고 답변을 받을때, 아래와 같은 오류가 발생하였다.

 

화면에 답변이 정상적으로 나오기 때문에 기능이 작동하지 않는 에러는 아니었지만

고치고 싶어서 구글링을 열심히 함..!!

 

 

🔍 원인

이 오류는 보안 백엔드/서버 측이 아닌 프런트엔드/클라이언트 측에서 OpenAI를 호출하는 경우 발생한다.

 

 

 

✅ 해결

chatgpt의 api를 받아오는 코드에

delete configuration.baseOptions.headers["User-Agent"];

를 추가한다.

 

 

💻 기존 코드

const generateText = async (input) => {
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_CHAT_API_KEY
    });

    const openai = new OpenAIApi(configuration);

    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: input,
      temperature: 0.7,
      max_tokens: 512,
      top_p: 1,
      frequency_penalty: 0,
      presence_penalty: 0,
    });

    return response.data.choices[0].text;
  };

 

 

🙆‍♂️ 수정한 코드 🙆‍♂️

const generateText = async (input) => {
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_CHAT_API_KEY,
    });

    delete configuration.baseOptions.headers["User-Agent"];

    const openai = new OpenAIApi(configuration);

    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: input,
      temperature: 0.7,
      max_tokens: 512,
      top_p: 1,
      frequency_penalty: 0,
      presence_penalty: 0,
    });

    return response.data.choices[0].text;
  };

 

이렇게 하면 이제 콘솔창에도 에러가 발생하지 않는다.

 

 

🕵️‍♀️ 느낀점

chatgpt를 이용한 개발을 할일이 더욱더 많아질거같아서 이러한 에러를 잡는 것을 잘 알아두는것도 중요할것 같다!!

 

 

 

 

<참고>

https://github.com/openai/openai-node/issues/6