This has bugged me a couple of times when setting up uploads directly from a client to DigitalOcean Spaces. The error path is:

• You have a backend that generates a pre-signed URL for a client to upload to.
• The client tries to upload to the pre-signed URL and gets a CORS error, which looks something like:

  1
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ...
  

  or

  1
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ...
  

  or

  1
  2
  ... as 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.
  

You’ve already done the following, to no avail:

• Set the CORS policy on the DigitalOcean Space to allow the origin of your client.
• Tried to use your signed upload from URL from a tool like Postman and it works fine.

The answer is the default JS fetch API sends some extra headers that DigitalOcean doesn’t like. To fix this you’ll need to allow all headers in the CORS policy on the DigitalOcean Space:

• Go to the DigitalOcean Space in question.
• Click on the ‘Settings’ tab.
• Under ‘CORS Configuration’ add the following:
  • Origin:
  • Allowed Methods: GET, PUT, POST, DELETE, HEAD
  • Allowed Headers: *
  • Access Control Max Age: 3600 (or something sensible)