S3 upload CORS error

I have created a job application form where someone can upload their CV. But when the user wants to upload this file, there is a CORS error:

Access to XMLHttpRequest at 'https://s3nh.ams3.digitaloceanspaces.com/image%20%281%29.png?x-amz-acl=public-read&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=BYNCYXDL3DWBODTYGYAW%2F20210526%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20210526T184245Z&X-Amz-SignedHeaders=host%3Bx-amz-acl&X-Amz-Expires=300&X-Amz-Signature=45b8258c38cb1168851a02d5e09c28f6c8207b83db1c78933682bd75018724bd' from origin 'https://www.intranetnh.nl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In Digital Ocean, the settings are as follows:

AFAIK I have done everything according to the instructions of Wappler. Have I missed something here?

Bump

It is difficult to tell without knowing your Serveraction setup and your S3 configuration.

I also had some issues with CORS at the beginning of my S3 adventure.

Reading through stackoverflow posts helped me understand the different CORS settings.

As I’ve understood from another wappler user, this is a Wappler issue known for a longer time. I have set everything exactly as per the documentation, so I want the team to let me know if this is known or if I can fix it somehow?

Any guidance on what configuration could be missing here @patrick / @Teodor ?

CORS should always be setup on the remote server, it is not something that can be done on the client. So with S3 it should be setup correctly on the S3 provider, like Digital Ocean. Seeing the screenshot it looks like it is setup correctly.

To debug you can use devtools and inspect the request, check if the response headers from Digital Ocean contain Access-Control-Allow-Origin and/or any other CORS headers.

I’ve tested the CORS different times with Digital Ocean and never had an issue with it, so I’m not sure why some users are not getting the correct CORS headers.

I would be very interested to find out if these problems can be resolved or explained. I tried using DigitalOcean - it worked fine for single upload, but not for multiple. Using the same API file, and the same App Connect file, with ‘Single’ selected it worked, with ‘Multi’ it failed. I would have thought this meant everything was set up correctly, but no solution was found and I gave up.

In case there’s anything which might help with your particular case, here is the thread.

Have you tried enabling the head option?

@TomD is right. I also had the MULTI option selected. Changing it to Single solved the CORS error.
The error I received is same as what Nevil has posted here when selecting Multi & trying to upload.

Any thoughts on how to debug this?

So if I understand correctly the CORS problem only occurs with the MULTI options selected? I will do some tests with the multi upload myself. It is a bit strange since the CORS header need to be send from the S3 server and both single and multi upload send the files to the same endpoint url.

This is certainly the issue I have - and @sid too it seems. I mentioned this, with screenshots etc. in the final message of this thread, where a number of potential solutions were discussed (but no resolution was found).

1 Like

Yes this is the issue. With single upload it does work, with multi it doesn’t.

No such issues with multi-uploads to S3 using Docker/Node on EC2…

Maybe it’s only related to Digital Ocean and multi uploads. Could you please confirm whether or not you will be working on this issue? Thanks :slight_smile:

It’s probably not surprising, but the same issue applies to Wappler 4. Perhaps it’s a problem with DO. It’s not just Wappler users who have similar problems.

It would be interesting to know if anyone has this working with DigitalOcean, in case there is some combination of options which does work. Anyone?

Edit: perhaps the link isn’t relevant. With Wappler, a single file upload works, but not multiple. The people on that discuss weren’t able to upload at all.