I am using Roby on Rails, Stimulus, Dropzone.js and DirectUpload to upload a file to DigitalOcean Spaces. when the selected file is being uploaded to DO Spaces, I get CORS error saying

Access to XMLHttpRequest at 'DO SPACES URL' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried to add CORS rule on DO spaces with following configuration: Origin: http://localhost:3001, Allowed Methods: PUT and POST, Allowed Headers: *. but there could not able to fix the issue.

I also tried to upload the XML file with following content:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://localhost:3001</AllowedOrigin>

   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

but the issue still persists. I also followed the steps Chris mentioned in this video but the issue still persists.
I know there has been similar questions in this and many platform but I tried each one I could find. This issue is not for localhost only, getting the same error on staging and production servers as well(added CORS rules for those servers as well but getting same error).