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:

Origins: *
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?

Thanks

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 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.

Submit an Answer