CODEWITHSUNDEEP
htmlspringspring-bootvue.jscors
Avinash Kharche
Avinash Kharche

Reputation: 441

How to fix CORS error in Vue.js and Spring Boot application

Access to audio at 'https://.amazonaws.com/.mp3' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

We have a vue.js frontend and spring boot backend.

There a tag in a vue.js file which gets the src link by calling spring boot backend server. The backend returns the src link. As you can see the below is the run time audio component

<audio data-v-3f267e7a="" src="https://****.amazonaws.com/****.mp3" eq-attached="true"></audio>

I am confused as why the browser is throwing CORS error in this case. Please let me know why the error in the first place and how to solve this. CORS is already enabled in spring security file. I already tried with @CrossOrigin annotations in spring controller.

Upvotes: 0

Views: 1648

Answers (1)

JRichardsz
JRichardsz

Reputation: 16515

Since your error is CORS, between your vue.js and amazon audio url, spring boot is not related to that.

Commonly CORS said us: No web application can download my resources using javascript.

In your case, amazon is telling you: Your web at localhost cannot download my audios.

If you would be the owner of amazon, and you want any website to be able to download your audios, you just need to add this response header in the audio url:

Access-Control-Allow-Origin : *

How fix it?

Try to use a minimal ajax invocation to dowload the audio url. With this you can verify if url is "downloadable" or has the classic cors headers. Don't forget to test it with a kind of server like one of these

If you can't download it or you get the same cors error as your vue app, you could verify that amazon does not allow this type of usage of audio urls.

Also verify if amazon has a kind of administration web console which allows us the registration of origins. In this case you must add the localhost:8080 or any domain in which your web app is running.

Workaround

If the url is downloadable at backend side, I mean with java and not with javascript, you could create a simple spring controller which will download the audio and return maybe the bytes or another format that your vue app needs. At this point you are the owner, so you could add any CORS header you need.

Upvotes: 1

Related Questions