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.
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.
Related
We have one scenario, using MS teams Task Module to popup and load a web page.
The web page is integrated with SSO(ADFS). When we load a web page in the popup, it will redirect to SSO link. Now the challenge is the Task Module (popup) inside using iframes to load a page, we have enabled iframe access in our domain(web page) and failing to load SSO page, because there also needs to enable iframe access (CORS).
Does anyone know how to enable CORS in ADFS?
CORS in only available for ADFS on Server 2019.
Note that iframes are also allowed.
This functionality (other than CORS) has been back ported to ADFS on Server 2016.
"The functionality to customize the HTTP security response headers (except CORS Headers) using cmdlets: Get-AdfsResponseHeaders and Set-AdfsResponseHeaders was backported to AD FS 2016. You can add the functionality to your AD FS 2016 by installing KB4493473 and KB4507459."
you'd better use a proxy to do the CORS, maybe it is better solution than config more backend code. Like more web frontend project like to use proxy to do the CROS work with backend API.
I tried to deploy a little node.js app that uses an API REST service from a third party. This API provides me some json served over a URL with HTTP
Now when I deployed the app on Heroku it wil not fetch the data from the API.
This error i got in my inspector
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.
It forces me to use HTTPS but I don't own that API, does this mean I cannot use it simply because it's not served over HTTPS or is there a workaround so I can still deploy the application and acces the API over HTTP?
I am facing an issue with my hosted project.
The request with link :- http://......./api_tester.html works fine and
provides results, but, it gives CORS 'Access-Control-Allow-Origin' Missing
when the api_tester.html file is accessed via the browser directly.
The URL for the file in the browser is file:///E:/workspace_windows/api_tester.html
Kindly suggest.
It seems you are trying to open the file directly from desktop, hence it is picking its protocol file:// protocol. Use either complete url starting with HTTP or run from any web server. Secondly error you stated means you are trying to access the page hosted on another domain and this usually happens when you do XHR requests to domain other than the one where your file is hosted.
You can add header "ACCESS-CONTROL-ALLOW-ORIGIN" to the file you are trying to access to allow all requests to be accessible from all different domains.
I've been looking at solutions so that I can create a cross-platform fluid experience. So to do this for the online website version, I would just send an Ajax request to a PHP script to query a MySQL database. But I am thinking of creating an electron app for offline use, so I will need to send queries to that online database, but I know there are a lot of limitations when it comes to Ajax with regards to cross-site requests.
So is it possible to send these sort of ajax requests to a PHP script on a web server, from an electron application. But, if Ajax requests aren't possible, how would I achieve this type of request to an online database. I have tried doing some research on the subject but was unable to find any solutions that are similar to this situation.
Cross-domain AJAX requests are blocked by default. All your regular desktop apps such as your Mail client send requests out all the time. You simply have to enable Cross-Origin Resource Sharing (CORS) on your server. I don't know what server application you're using (Apache/Nginx), but for Apache you can start simply by adding the following line to the relevant part of your Virtual Host or .htaccess file:
Header set Access-Control-Allow-Origin "*"
You can refer to the Enable CORS to learn how to enable CORS for other server technologies.
I have a Flask project deployed on AWS / Elastic Beanstalk
I have an embedded Adobe Flash SWF which attempts a POST request method to my published URL. It was previously working, but now it no longer accepts it -- instead, it does nothing.
The POST request does work on localhost, but not when deployed. I believe this may be a permissions issue involving crossdomain / CORS support, but I am not sure. How can I ensure that cross-domain requests are accepted in AWS EB?