Random 502 Bad Gateway / CORS errors

Hello!

I keep getting 502 Bad Gateway errors masked as CORS errors when uploading images via direct upload API.

Error only happens once in 5 uploads or so, so it is hard to investigate. Uploads mostly succeed, but sometimes they fail shortly after upload starts, e.g.:

  1. Initiating post from axios (the same error happens when using basic fetch)
  const data = new FormData()
  data.append('file', file, newFileName)

  const result = await axios.post(directUpload.uploadURL, data, {
    onUploadProgress: console.log,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
  1. axios onUploadProgress hook reports first chunk uploaded successfullly
  2. Request fails completely. Error logged: “Cross-Origin Request Blocked”, as well as “Status code: 502

See the attached screenshot for the logs:

I noticed that all failed requests are coming from Firefox. Locally I tested upload from Safari, Edge and Firefox, and firefox seems to be the only browser where the error could be reproduced.

I have tried turning HTTP/3 off locally, and it appears that now no requests fail. Could it be the problem?