OPTIONS preflight request missing critical headers causing upload failure in Docker/localhost environments

[mohsentaleb]

When using FileUploaderRegular in a Docker development environment, the OPTIONS preflight request to Uploadcare's API hangs indefinitely, causing file uploads to fail with a 405 error.

The core issue: The React uploader's OPTIONS preflight request is missing critical browser headers compared to the working jQuery widget, causing the request to hang.

Comparison of OPTIONS Requests:

✅ Working (jQuery widget) - includes these headers:

Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Pragma: no-cache
Referer: http://127.0.0.1:8000/
Sec-Fetch-Dest: empty
Sec-Fetch-Site: cross-site

❌ Failing (React uploader) - missing all of the above headers

The incomplete OPTIONS request causes the preflight to hang indefinitely (stays in "pending" state in Network tab), and the subsequent POST request fails.

Steps to reproduce:

1. Set up a React app in Docker, accessed via http://localhost:8000 or http://127.0.0.1:8000
2. Import and use FileUploaderRegular component
3. Drop or select an image file
4. Open browser DevTools → Network tab
5. Observe: OPTIONS request to https://upload.uploadcare.com/base/?jsonerrors=1 stays in "pending"
6. Eventually get error: {"error": {"status_code": 405, "content": "HTTP method GET is not allowed for /base/", "error_code": "MethodNotAllowedError"}}

Note: The old jQuery Uploadcare widget works perfectly in the same environment with identical setup.

Expected behavior

The OPTIONS preflight request should complete successfully with status 200 (like the jQuery widget does), followed by a successful POST request uploading the file.

Code / screenshots

import { FileUploaderRegular } from '@uploadcare/react-uploader';
import '@uploadcare/react-uploader/core.css';

function App() {
  return (
    <FileUploaderRegular
      pubkey="demopublickey"
      onChange={(e) => console.log('File uploaded:', e.detail)}
    />
  );
}

Network tab showing hanging OPTIONS request:

• OPTIONS request: Status "pending" (never completes)
• POST request: Status 405 "Method Not Allowed"

Working jQuery widget OPTIONS request completes in ~20ms with status 200

Environment

• Library version: @uploadcare/react-uploader@1.10.2 (also tested with 1.8.1, same issue)
• Language/framework version: React 18, TypeScript 5
• OS version: WSL, running in Docker container, accessed via Chrome 141.0.0.0

[nd0ut]

The uploader itself does not send OPTIONS requests - the browser does this automatically for CORS checks.
Both the jquery widget and the react uploader use XMLHttpRequest, so if something is wrong with the OPTIONS request, it's most likely related to your browser, network, or container setup, not to the uploader code.

Things to check

• Chrome "Provisional headers are shown"
  This message means Chrome hides the real headers sometimes. It doesn't mean they are missing.
• Check if the request really goes out
  Use a packet sniffer or a network tool inside your container to see if the OPTIONS request is actually sent.
• Do you use Service Workers?
  They can intercept or block network requests sometimes.
• Try a plain XHR test
  Please run this code in your browser console or on your page.
  It uploads a small test image directly to Uploadcare and helps check if uploads work in your environment without React or the widget.

function upload() {
  const base64 =
    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAnsB9U+UbkAAAAAASUVORK5CYII=";
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);

  const file = new File([bytes], "1px.png", { type: "image/png" });
  const form = new FormData();
  form.append("UPLOADCARE_PUB_KEY", "demopublickey");
  form.append("file", file);

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "https://upload.uploadcare.com/base/");
  xhr.onload = () => {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log(`Uploaded: https://ucarecdn.com/${data.file}/`);
    } else {
      console.error("Upload failed", xhr.status, xhr.responseText);
    }
  };
  xhr.onerror = () => console.error("Request failed");
  xhr.send(form);
}
upload();

[mohsentaleb]

The problem was because of passing onModalClose={handleModalCloseEvent} to <FileUploaderRegular />. Once I removed that, it started to work.

const [uploadedFiles, setUploadedFiles] = useState<OutputFileEntry<'success'>[]>([]);
const resetUploaderState = () => ctxProviderRef.current?.uploadCollection.clearAll();
const handleModalCloseEvent = () => {
        resetUploaderState();

        onChange([...files, ...uploadedFiles]);

        setUploadedFiles([]);
    };

No idea why this happens though. I took the code from your official sample code.