Direct Image Upload CORS Error

Developers Images
1

Hi, I’m hoping someone can help me…

I’ve seen many topics on here that seem to be the same as mine. I’ve read them and it seems as though many of them were not resolved - others it was the developers implementation error…

I’m following these docs:

My implementation is:

  • Create an endpoint on my API that makes the request to Cloudflare and returns the result
  • Make a request from my UI to this endpoint.
  • Use the uploadURL from the result and make a post request (using axios) directly to the provided URL

With the above, I’m getting CORS errors. Am I missing something?

Thanks in advance!

1 Like
2

Can you please show us a URL which shows the CORS error, so we can inspect it.

Thanks

1 Like
3

Hi,

Thanks for the reply. Sure. Here are some screenshots (just for futher info - url included at the end)…

The first is of the request to the endpoint in my api that returns the uploadURL:
image

Here’s the result:
image

And then both the OPTIONS request and the post request to the url fail:

image
image745×97 16.2 KB

Here’s the full url from the request:
https://upload.imagedelivery.net/5d284dbe-19d6-4e4c-9a26-78566bd1acf8

1 Like
4

Seems like you are facing this exact problem: CORS error when using Direct Creator Upload - #12 by dgg

While this normaly should be fixed as @yevgen stated HERE:

The CORS support has been added for Direct Creator Upload.

I personally would recommend changing your Referrer Policy:
image
as strict-origin-when-cross-origin would dissalow all domains requesting it beside the one it gets hosted on.

Hope @yevgen or @zaid can shed some light into this how exactly to do this.

Best would be if you already create a ticket and provide us with the ticketnumber.

5

Thanks for the reply.

That is the default ‘Referrer-Policy’ and not something that I have control over setting, from what I can tell:

Based on the stack overflow question it refers to, we can only set custom headers:

It makes sense to me that this is something that is controlled by the server and not by the client. If you look here, you can see that this is on the server, not the client (even though this is just an html example, the logic holds for me - happy to be wrong):

I’d appreciate any further feedback or guidance.

Thanks

6

I managed to get this to work. This has been a rather frustrating and time consuming exercise.

In short, we use axios in our application for making all requests. Naturally, I tried to use this for my requests to Cloud Flare, but after knocking my head for days, I thought I’d just try using fetch. Even this was a little frustrating, but it didn’t take me very long to get it to work.

In short, this is our solution:

  • We have created an endpoint on our api that makes the intial request to Cloud Flare for the uploadURL (using our configured version of axios)
  • We call our own endpoint from our application gui and receive the newly created uploadURL.
  • We make a request to the new uploadURL using fetch. Initially, we were setting the ‘Content-Type’ header to ‘multipart/form-data’, but Cloud Flare throws errors when you do this, so simply do not send any header along with your request.

Here’s an example of a simple request (after doing all the other necessary bits to get the url and setup the form-data:

const uploadResult = await fetch(uploadURL, {
  method: 'post',
  body: formData
})

Comments for the Cloud Flare team:

  • This was way more frustrating and time consuming than it needed to be. I almost gave up on the solution and went back to using AWS S3
  • Maybe there were things being sent along with my axios request that the fetch request did not have, but this all leaves me stumped as to how it could result in a CORS issue. All of that aside, there are many people that have faced this issue and it would have been nice to see Cloud Flare put a bit more effort into the support. A simple blog post could help solve so much of the frustration that has been felt.
  • Lastly, @M4rt1n, just for interest’s sake, the ‘Referrer-Policy’ is exactly the same in my requests that now work.

image

3 Likes
7

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.

8

Please find a detailed explanation of the problem and solution here:

Please let me know if you still run into this issue.