Sending axios request to Whisper endpoint with file input in client-side JS

I have a working NodeJS code that makes a request to /audio/transcriptions endpoint on a localhosted OpenAI API.

The file is given as fs.createReadStream("speech.m4a").

The node application works perfectly as it should, giving output: {text: "<the transcription of the speech>"}

However when I want to do the same request, but with an input field instead of a hardcoded file, I get AxiosError with the message 'Network error'.

I have tried to call axios.post like this:

const API_URL = "http://172.26.175.134:8080/openai/v1/audio/transcriptions";
const fileInput = document.getElementById("file-input");
fileInput.onchange = () => {
  const files = fileInput.files;
  //if no file is selected
  if (files.length === 0) {
    alert("Please select a file!");
    return;
  }
  const selectedFile = files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    axios
      .post(
        API_URL,
        {
          file: new File([e.target.result], { type: selectedFile.type }),
          model: "whisper",
          language: "en",
          temperature: 1,
          prompt: "",
        },
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      )
      .then((response) => {
        console.debug(response.data);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  };
  reader.readAsArrayBuffer(selectedFile);
};

The result is the same, I get the same AxiosError with the message Network error.

I have also noticed that the Response is 200 OK, so the transcript is generated.

The API response:

INFO: 172.26.160.1:62548 - "POST /openai/v1/audio/transcriptions HTTP/1.1" 200 OK

The backend response:

INFO:faster_whisper:Processing audio with duration 00:19.925
INFO:faster_whisper:Detected language 'en' with probability 1.00
INFO:__main__:Completed /tmp/tmpswy0__ru
INFO:__main__:Transcription complete!

Update: I have also switched from axios to fetch, it is still a valid request (response is 200 OK), but still I can't fetch the response

reader.onload = async (e) => {
    const body = new FormData();
    body.append(
      "file",
      new File([e.target.result], { type: selectedFile.type })
    );
    body.append("model", "whisper");
    body.append("language", "en");
    body.append("temperature", "1");
    body.append("prompt", "");
    await fetch(API_URL, {
      method: "POST",
      body: body,
    })
      .then((res) => {
        console.debug(res);
      })
      .catch((err) => {
        console.debug(err);
      });
  };

TypeError: Failed to fetch at reader.onload

My question is: what can cause the issue with this request? What can I do to retrieve the response content as expected?

I have managed to resolve the issue by fixing CORS error on the API's side. I had to add the following lines (especially allow_origins=["*"]) to the API-code (FastAPI written in Python)

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)