I use wavesurfer.js
If I put an internal link such as "./assets/audio/example.mp3" the wave is generated successful but if I put an external link such as "https://www.w3schools.com/html/horse.ogg" I have the bellow error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.w3schools.com/html/horse.ogg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
I feel like it must have something to do with the xhr settings but I don't know anything about that.
In the wavesurfer.js website, there is no complete explanation about this, unfortunately
Related
I am confused by why the cors package allows the request to be processed even if the origin in the request header isn't white-listed. For example, res.status(202).send(await User.find()) returns a response with status code 202, but the data can't be loaded in the Chrome console.
Also, doesn't the browser send preflight OPTIONS requests to know what's allowed; why would it send cookies/credentials along a request with a disallowed origin?
Edit: Tried a post request on jsfiddle and the post request doesn't happen server side. When I said "why the cors package allows" it would be better to say why the browser allows.
CORS is enforced in the browser, not in your server. The server participates in setting headers that the browser can then use to determine whether the request should be allowed or not. But, it is the browser that ultimately decides whether the CORS request satisfies the requirements or not and the result should be passed through to the Javascript in the browser.
Thus, the request is sent to the server, response is received and THEN the browser decides whether the Javascript in the page is allowed to see the result or not.
In some cases where the request is likely to have side effects on the server (based on a set of criteria in the request), the browser will send a pre-flight request to get just the CORS info first.
I am trying to run thinkcmf framework backend with vue front end.
I get the bellow error.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://domainname.com:80/api/. (Reason: CORS request did not succeed). Status code: (null).
can anyone help with this?
I do have a question regarding Graphql, i made it work but when we changed our domain from ".myshopify" to "custom" domain, it stopped working, it returns a error 400.
Here's the complete error.
OPTIONS https://testwebsite.myshopify.com/admin/api/graphql.json 400
Access to XMLHttpRequest at 'https://testwebsite.myshopify.com/admin/api/graphql.json' from origin 'https://testwebsite.com.au' has 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.
Hope you can give me an answer.
Thank you
I tryed to access an API from Ionic, but I receive the error:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503.
I've already tried using JSONP (with callback).
I am trying to use the Aurelia HttpClient to call the TagniFi API on a different domain (and authenticating). The relevant code is:
return this._httpClient.createRequest(uri)
.asGet()
.withCredentials(true)
.withHeader('Access-Control-Allow-Origin', 'localhost:9000')
.withHeader('Authorization', 'Basic <my-key>')
.send();
I do receive a status 200 from the API, but I get the following error:
Response to preflight request doesn't pass access control check: A >wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header >when the credentials flag is true. Origin 'http://localhost:9000' is >therefore not allowed access. The credentials mode of an XMLHttpRequest >is controlled by the withCredentials attribute.
I am not sure if this is a error in the way I am making the call or a bug in Aurelia. Any help is appreciated. Thanks.
The Access-Control-Allow-Origin is an header sent in the response by the server and in your case you use it in the request from the client.
It's not a bug in Aurelia but a misuse of CORS.
See this excellent answer for more information on CORS.