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?
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:
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.
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 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:
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.