This is my code, quite simple. just a POST request to my api endpoint with FormData.

but for some unknown reason the api says the data is a bad request. i tested my api via curl and it works fine.

const formData = new FormData();
formData.append("file", file); // file is a File object from an file input element
formData.append("extension", extension); // just text
formData.append("api_key", api_key); // just text
let url = "http://example.com/my/api/url/here";
let request = new XMLHttpRequest();
request.open("POST", url);
request.responseType = "json";
request.send(formData);

in chrome’s dev tools, the payload tab looks like this, it correctly labels it as FormData

------WebKitFormBoundaryxVfw6PrIESuvhgwP
Content-Disposition: form-data; name="file"; filename="video_file.mp4"
Content-Type: video/mp4


------WebKitFormBoundaryxVfw6PrIESuvhgwP
Content-Disposition: form-data; name="extension"

video_file.mp4
------WebKitFormBoundaryxVfw6PrIESuvhgwP
Content-Disposition: form-data; name="api_key"

e024d3-d2c3ec-97ea45-025ffe-910e53
------WebKitFormBoundaryxVfw6PrIESuvhgwP--

The request headers are these.

POST /my/api/url/here HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: en-US,en;q=0.9,as;q=0.8
Connection: keep-alive
Content-Length: 52751209
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxVfw6PrIESuvhgwP
Host: test-api.clipdrop.io
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

Here is the curl (extracted via the dev tools) which returns a succesful response.

curl 'http://example.com/my/api/url/here' ^
  -H "Accept: */*" ^
  -H "Accept-Language: en-US,en;q=0.9,as;q=0.8" ^
  -H "Connection: keep-alive" ^
  -H "Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxVfw6PrIESuvhgwP" ^
  -H "Origin: http://localhost:3000" ^
  -H "Referer: http://localhost:3000/" ^
  -H "Sec-Fetch-Dest: empty" ^
  -H "Sec-Fetch-Mode: cors" ^
  -H "Sec-Fetch-Site: cross-site" ^
  -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36" ^
  -H ^"sec-ch-ua: ^^"Not/A)Brand^^";v=^^"8^^", ^^"Chromium^^";v=^^"126^^", ^^"Google Chrome^^";v=^^"126^^"^" ^
  -H "sec-ch-ua-mobile: ?0" ^
  -H ^"sec-ch-ua-platform: ^^"Windows^^"^" ^
  --data-raw ^"------WebKitFormBoundaryxVfw6PrIESuvhgwP^

Content-Disposition: form-data; name=^^"file^^"; filename=^^"video_file.mp4^^"^

Content-Type: video/mp4^

^

^

------WebKitFormBoundaryxVfw6PrIESuvhgwP^

Content-Disposition: form-data; name=^^"extension^^"^

^

video_file.mp4^

------WebKitFormBoundaryxVfw6PrIESuvhgwP^

Content-Disposition: form-data; name=^^"api_key^^"^

^

e024d3-d2c3ec-97ea45-025ffe-910e53^

------WebKitFormBoundaryxVfw6PrIESuvhgwP--^

^"

any ideas what the issue is?