CORS error when using Direct Creator Upload

Developers Images
1

Howdy,

I’m trying to use a Direct Creator Upload URL to upload images client side using Axios. My code looks basically like this:

  const onDrop = (acceptedFiles) => {
    axios
      .post("/api/v1/services/cloudflare/direct-upload")
      .then(async ({ data }) => {
        let formData = new FormData();
        formData.append("file", acceptedFiles[0]);

        await axios.post(data.result.uploadURL, formData, {
          headers: { "Content-Type": "multipart/form-data" },
        });
      });
  };

This works, the image is successfully uploaded and visible in the Cloudflare dashboard UI, however it throws a CORS error every time, and I am unable to get any callback data from the post to data.result.uploadURL, regardless of the successful upload.

I may be misusing this flow, but my hope is to get the Cloudflare result callback and attach that to related data that I’ll be storing. I would regardless expect a 200 response since it is uploading the file as expected.

2

Have you done a search for this? I’m pretty sure it’s come up a bunch of times. As I recall, people are POSTing to cloudflare.com instead of their own domain endpoint.

3

Yes, I’ve searched, and the results I found were related to video upload and not the newly released images. I’m basing my implementation on what’s documented here: Direct Creator Upload · Cloudflare Image Optimization docs

This works as expected if I POST to an upload.imagedelivery.net uploadURL in Postman, but does not work client side.

4

Ah…I suspect they work the same way, but @zaid would know for sure.

5

I also have this problem using direct upload - am switching from uploading direct to S3 from browser, where I was able to set the CORS headers. Doesn’t seem to be an option for setting CORS headers so not sure how direct upload is supposed to work when done via ajax requests?

6

I’m using the Cloudflare Stream service too, and the direct upload returns the proper CORS headers:

curl -I https://upload.videodelivery.net/XXXXX-XXX-XXXX-XXXX-XXXXXXXX -X ‘OPTIONS’

HTTP/2 200
date: Thu, 23 Sep 2021 14:06:46 GMT
content-type: text/plain; charset=utf-8
content-length: 0
access-control-allow-origin: *
cache-control: private
access-control-allow-headers: Origin, Tus-Resumable, Tus-Version, Location, Upload-Length, Upload-Offset, Upload-Metadata, Tus-Max-Size, Tus-Extension, Tus-Resumable, Upload-Defer-Length, X-HTTP-Method-Override, Content-Type
access-control-allow-methods: GET, POST, PATCH, HEAD
access-control-expose-headers: Tus-Resumable, Tus-Version, Location, Upload-Length, Upload-Offset, Upload-Metadata, Tus-Max-Size, Tus-Extension, Content-Type, Stream-Media-ID
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
strict-transport-security: max-age=15552000
server: cloudflare
cf-ray: XXXXXXXXXX-LHR
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400, h3-28=":443"; ma=86400, h3-27=":443"; ma=86400

Image delivery has CORS headers missing:

curl -I https://upload.imagedelivery.net/XXXXX-XXX-XXXX-XXXX-XXXXXXXX -X ‘OPTIONS’

HTTP/2 400
date: Thu, 23 Sep 2021 14:07:21 GMT
content-type: application/json
content-length: 107
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: XXXXXXXXXXX-LHR
7

The OPTIONS request is actually returning 400, the body of the response is:

{"result":null,"success":false,"errors":[{"code":"100","message":"method is not supported"}],"messages":[]}

I believe this method is required for xhr direct uploads though?

Is this an oversight from CloudFlare on the Images service?

Stream is implemented properly and allows xhr uploads…

8

I have submitted a support ticket for this, but still waiting to hear back from Cloudflare with a solution.

Ticket: 2263971 @MoreHelp

We’ve already subscribed to the CloudFlare Images service and I’m very eager to implement this ASAP.

Thanks.

9

Still no reply to this, which is extremely disappointing @sdayman @zaid - anyone…?

10

I apologize for the delay. I have confirmed the issue and we are working on a fix. I’ll keep you posted soon as we have a fix in coming days.

11

Thanks for acknowledging this @zaid - really good to know it’s being worked on - we look forward to being able to use it soon :raised_hands:t3:

12

Slightly related, getting a CORS error when linking to the image from localhost (dev environment). Getting the image via fetch() and putting it on a canvas. Can work around now by loading it in an img tag but it can block some features of the canvas. Controlling this would be helpful, adding origins or wildcard.

14

The CORS support has been added for Direct Creator Upload.