By mstrlaw
I’m trying to upload a file using Vue+axios by generating a pre-signed URL on my server and then using that URL to attempt a PUT.
Unfortunately I constantly get request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. even though I’ve configured my CORS as loose as possible:
Methods: GET, PUT, DELETE, HEAD, POST
Headers: Access-Control-Allow-Origin, Access-Control-Request-Headers, Access-Control-Request-Method, Origin, Referer```
I've also tried with * as the Headers value and putting my prod domain (I had hoped the above would work on localhost). It also doesn't work for my prod domain.
Any idea on how one can get this to work?
ThanksThis textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Accepted Answer
Figured out that it isn’t an issue with DO’ Spaces CORS config, but actually related to axios (in my case I was using axios in a VueJS app).
In my case: I was generating a pre-signed PUT URL. Then, on the actual PUT request, my axios instance sent the common default headers (specifically the Authorization header due to the user auth token being set globally), which was resulting in continuously getting a No 'Access-Control-Allow-Origin' response…
The solution, if you’re using axios, is to use transformRequest in order to remove the Authorization header for that single request only (my advice, remove any other header).
It will avoid sending these Headers and your PUT request to the pre-signed URL will work. This answer put me in the right path (after figuring out that when using fetch the issue didn’t occur.
Writing this in case it’s helpful for future readers:
I was struggling with a similar issue, where we used pre-signed URLs with the DigitalOcean spaces storage backend for multi-part file uploads.
Initially, the requests failed entirely due to lacking CORS policies in the DigitalOcean spaces responses. After some diggin, it turned out you can configure CORS policies in the DO spaces management dashboard.
Next issue we ran to is that the client (browser) didn’t have access to the ETag response header sent by DigitalOcean spaces, as it was lacking the Access-Control-Expose-Headers header allowing the access to the ETag header. To solve this, there doesn’t seem to be an official DigitalOcean supported way to do it, but luckily I found this thread which showed how you can do it directly with s3cmd:
With s3cmd, it’s possible to upload a CORS policy file directly to the bucket, which also works on DigitalOcean spaces. This overrides any existing CORS settings set on the bucket
Example CORS policy file:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Note how we can define the ExposeHeader property here on top of the settings already manageable on the DigitalOcean dashboard. I do not know why has the option been omitted from the official UI.
Once you have the file and s3cmd configured, it’s simple enough to upload to the bucket:
s3cmd setcors FILE s3://BUCKET
Tried everything but nothing worked. spent hours.
Finally found some random guy on the internet adding 'x-amz-acl': 'public-read' header into the axios request. I have tried that too and it worked for me to solve the issue.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.