This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
I'm starting to despair.
I run a Wordpress website where I call various rest API interfaces. The problem is that some of my calls are blocked. I have already edited in the various wp files (function.php, http.php, .htaccess, etc.) but without success. The problem persists, but the odd thing is that only certain API calls will be blocked.
These are two example calls:
var httpRequest1 = new XMLHttpRequest();
httpRequest1.open("GET", "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd", false);
httpRequest1.send(null);
var jSONText1 = httpRequest1.responseText;
var httpRequest2 = new XMLHttpRequest();
httpRequest2.open("GET", "https://siamining.com/api/v1/network", false);
httpRequest2.send();
var jSONText2 = httpRequest2.responseText;
The first call works without problems and i get responding Json, but with the second I get the following error message:
Access to XMLHttpRequest at 'https://siamining.com/api/v1/network' from origin 'http://my-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
In various files I tried ,
Access-Control-Allow-Origin: *
to insert, but that was synonymous with no success. I do not understand what the difference between the two calls is and why the second one get blocked.
The https://siamining.com/api/v1/network have the Access-Control-Allow-Origin header set to false.
The only way to circumvent it is to make the request server side having your own server that talks with siamining.com and from your wordpress javascript now you call your server endpoint that gives the reponse you want.
Related
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 2 years ago.
I have an idea have for a webapp to help me improve my front end development. When I'm refactoring front end code I want to be able to quickly visually check through all the instances on my site.
My current plan is to load them within a series of iframes and to be able to flick through instances on each iframe. After discussing it with a friend, the plan we came up with was to use a js script to 1) give iframe/CORS access to the page and 2) scan the page and send instances of the class to the parent (the site with the iframe). I want the site to run separately so it can be a stand alone project. (So I'm running "CSS Friend" on localhost:4000 and the site I'm refactoring on localhost:3000.
The use of a js script would be ideal so that no matter your framework, you could add this script to your application.html file and then it would work.
I am able to give CORS access to iframes through changing my config settings in my development.rb file (as in sever side), but when I run:
<script>
console.log("script working");
var method = "POST";
var url = "http://localhost:4000";
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
var text = {"command":"PUSH"};
xhr.send(text);
</script>
(An idea from this answer: javascript set header Access-Control-Allow-Origin)
I get the following error:
Access to XMLHttpRequest at 'http://localhost:4000/post' from origin 'http://localhost:3000' 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.
Is it possible to change CORS setting with a JS script, or does it always have to happen on the server side?
You can't change the CORS policy with javascript, because the CORS policy exists to make sure any random website, can't do whatever malicious thing it wants to do. This would all be useless if you could turn it off with javascript.
It exists to protect you against javascript, so it's obvious javascript can't turn it off. It would be a bit like writing your password on a note next to your computer. It'd be a bit pointless.
What you could do however (on the server side), Is attach a "Access-Control-Allow-Origin: *" header to the http response from localhost:4000.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 4 years ago.
Hi Maybe you can help enlighten me :)
Im trying to make a simple Quote Generator app in pure Javascript (no jQuery), and Im trying to load the following api
https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en
but I keep getting the following error, whether on local host or if I upload it to a host:
Failed to load
https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://127.0.0.1:50969' is therefore not allowed
access.
The code Im using is the below:
// JavaScript Document
var xhr = new XMLHttpRequest();
xhr.open('GET',"https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en",true);
xhr.responseType = 'text';
xhr.send();
xhr.onload = function() {
if(xhr.status === 200) {
var myStuff = JSON.parse(xhr.responseText);
console.log(myStuff);
}
}
If I use an API url with a .json at the end such as:
http://api.wunderground.com/api/3a9c68e56dd0e1fb/conditions/q/90210.json
it works fine, but if I use anything without the .json it gives me that error.
Ive searched all day and cant find a solution and I really don't want to use jQuery for this.
It's about CORS
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
this should help - actually there is no way you could do it from website. your request will be blocked by your browser. what you can probably do is to write backend proxy that will do it.
quick and easy answer - You are requesting a resource that is only supposed to be requested from the same origin, meaning from https://forismatic.com
It works with JSON because JSON works in a bit different way, but for the normal API call to work, someone on the API server would have to allow your website's origin for it to be able to make secure calls to the server.
You can try using JSONP for the request and see if it helps.
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
I've found simple tutorial how to make cross domain json call here
And it works perfectly fine, so i decided to use this example, just change url from:
var url = "http://api.myjson.com/bins/23xvb";
to
var url = "http://dl.sniper.pl/test.json"
Unfortunately changing it returns such an error (in chrome):
XMLHttpRequest cannot load http://dl.sniper.pl/test.json. Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
Googling that error didnt provide any answers to find a solution so here's the question:
Why i get such an error and how to solve it?
The http://dl.sniper.pl/ server must be configured to send the Access-Control-Allow-Origin response header in responses to requests for http://dl.sniper.pl/test.json.
But because that server isn’t sending the Access-Control-Allow-Origin response header, your browser is refusing to allow your frontend JavaScript code to access that response.
So you either nust configure the http://dl.sniper.pl/ server to send Access-Control-Allow-Origin or else you can make the request through a CORS proxy.
There’s an open CORS proxy you can make you request through by changing your code to this:
var url = "https://cors-anywhere.herokuapp.com/http://dl.sniper.pl/test.json"
That sends the request through the open CORS proxy https://cors-anywhere.herokuapp.com which adds the Access-Control-Allow-Origin response header to it and then passes that back to your requesting frontend code as the response.
That response with the Access-Control-Allow-Origin response header is what the browser sees, so the browser allows your frontend JavaScript code to actually access the response.
You can also easily set up your own CORS proxy using https://github.com/Rob--W/cors-anywhere/
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for an explanation of how browsers behave when you send cross-origin requests frontend JavaScript code using XHR or the Fetch API or AJAX methods from JavaScript libraries—and for details about what response headers must be received in order for browsers to allow frontend code to access the responses.
you should configure you server todo this in your htaccess
u need something like this
<RequireAll>
Require all granted
</RequireAll>
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 8 years ago.
I'd like to get the text on this page:
https://cvo-v025.cvo-zwfryslan.nl/display/ToonBerichten.aspx?uid=ctl14&pid=723df4e4-248f-4df6-b3ad-751b410daab7&id=1c76d69d-d858-44d9-8a47-e65e9f294898
Php cUrl isn't working, YQL isn't working (but didn't give an error), javascript didn't work, the error message was:
XMLHttpRequest cannot load https://cvo-v025.cvo-zwfryslan.nl/display/ToonBerichten.aspx?uid=ctl14&pid=…3df4e4-248f-4df6-b3ad-751b410daab7&id=1c76d69d-d858-44d9-8a47-e65e9f294898. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://--------.nl' is therefore not allowed access.
Is there a way for me to get the text from that page?
The page you're trying to fetch text from actually makes a POST request to another resource to fetch the text via XHR. When you open Firebug or similar, you should see the POST request, its URL and response. It would appear that you need to have a session on the site to actually fetch anything, as making a POST request to that URL fails to retrieve anything useful.
Copying the request as CURL does yield a working terminal command, along with all sent headers, but I doubt it will be helpful if you wish to do this programmatically.
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 9 years ago.
Im trying to make requests to a remote Rest (put method) api
var xhReq = new XMLHttpRequest();
xhReq.open("PUT", "http://api-easybib.apigee.com/2.0/rest/cite", true);
xhReq.setRequestHeader('Content-Type', 'application/json');
var jsonString = "{...}";
xhReq.send(JSON.stringify(jsonString));
var serverResponse = xhReq.responseText;
it fails with
No 'Access-Control-Allow-Origin' header
although i succeeded to make call via rest client browser plugins.
What am i missing?
Because cause security, all browser are not accept a ajax cross-origin request from your site.
In order to browser accept a ajax cross-origin request, server code must set header "Access-Control-Allow-Origin" to response to notify browser that it accept a ajax cross-origin request.
In a browser plugin (ex: chrome app), chrome allow developer config to send request cross-origin. So you can send cross-domain request in REST Client plugin. (http://developer.chrome.com/apps/app_external.html#manifest)
Add the Access-Control-Allow-Origin on your server or use JSONP
(see What is JSONP all about?)