Why do I can't fetch data from openai using vite (post 400 error, Refused to set unsafe header "User-Agent")

Question

My code :

import { useState } from 'react'
import './App.css'
import {Configuration, OpenAIApi} from "openai"
const configuration = new Configuration ({
  apiKey: import.meta.env.VITE_API_KEY
})


const openai = new OpenAIApi(configuration)
console.log(import.meta.env.VITE_API_KEY)
function App() {

  async function fetchData() {
    try {
      const response = await openai.createImage({
        prompt:"Cat with wings",
        n:1,
        size:"1024x1024",
      })
      console.log(response.data.data[0].url);
    } catch(e) {
      console.log(e);
    }
  }
  return (
    <div className='App'>
      <h1>Image generator</h1>
      <button onClick={fetchData}>Generate</button>
    </div>
  )
}

export default App

My post errors:

content.bundle.js:48855     POST https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2Fwisdolia%2Fdatabases%2F(default)&gsessionid=KNPak3qlEqjbK1Dw89HuJQyTDKLuFQtkEUcQDtef0Ao&SID=3ZJJagIR82xivXLjduKIpQ&RID=47736&TYPE=terminate&zx=2yrieplcy2ed net::ERR_BLOCKED_BY_CLIENT
------------------------------------------

POST https://api.openai.com/v1/images/generations 400
------------------------------------------
POST https://api2.amplitude.com/2/httpapi net::ERR_BLOCKED_BY_CLIENT
------------------------------------------
POST http://127.0.0.1:8765/ net::ERR_CONNECTION_REFUSED
------------------------------------------
content.bundle.js:48855     POST https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2Fwisdolia%2Fdatabases%2F(default)&gsessionid=G_osTBrJjdZ0dJFKdwn6--LI7DlkbDfTaaGnRMaPMQY&SID=mBMN76MAHY1Aqd9G0qrRHw&RID=94346&TYPE=terminate&zx=513gjpvnbjoc net::ERR_BLOCKED_BY_CLIENT

My failed to fetch errors:

Amplitude Logger [Error]: Failed to fetch
    ------------------------------------------
Amplitude Logger [Error]: Failed to fetch

    ------------------------------------------
Amplitude Logger [Error]: Failed to fetch

    ------------------------------------------
Amplitude Logger [Error]: Failed to fetch

    ------------------------------------------
Amplitude Logger [Error]: Failed to fetch

Other errors:

Refused to set unsafe header "User-Agent"
        ------------------------------------------

Error: Request failed with status code 400
    at createError (createError.js:16:15)
    at settle (settle.js:17:12)
    at XMLHttpRequest.onloadend (xhr.js:66:7)
        ------------------------------------------
isUploadingPDF false(i got this 3 times)
        ------------------------------------------
Uncaught (in promise) failed to issue request: [object ProgressEvent]

I actually got the failed to fetch error 5 times.

NB: I am from Iran which is banned in many places. I logged on openai with my Serbian friend's phone number and yes my VPN is on whenever I run my app just added some details