I've been trying to get article from NewsAPI.org but I got this error:
Access to XMLHttpRequest at 'https://newsapi.org/v2/top-headlines?country=us&category=general&apiKey=XXXXXXXXXXXXX' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
And I noticed it stops at readystate 4 and status 0.
this is the code of the function I use:
function getNews()
{
var url = 'https://newsapi.org/v2/top-headlines?country='+country+'&category='+category+'&apiKey=XXXXXXXXXXXXX';
var req = new XMLHttpRequest();
req.open('GET' , url);
req.send();
req.onreadystatechange = function()
{
if(req.readyState == 4 && req.status == 200)
{
news = JSON.parse(req.response);
news = news.articles;
displayNews();
}
}
}
Note: I tried to add the 'Access-Control-Allow-Origin' header but it makes no change.
First of all, the xhr request is not stopping at req.readystate == 4 instead at res.send(). Also CORS is a standard web security service provided by the browser to prevent data leak from other origin.
For testing locally, you can bypass it by adding the header:
Access-Control-Allow-Origin: *
Related
I am trying to check wheater the URL of another domain exists or not from my domain('https://radiusofficefurniture.ie') using Javascript like :
var request = new XMLHttpRequest();
request.open('GET', 'https://www.mozilla.org', true);
request.onreadystatechange = function(){
if (request.readyState === 4){
if (request.status === 404) {
alert("Oh no, it does not exist!");
}
}
};
request.send();
But the issue of CORS policy occurred. The error is like this:
Access to XMLHttpRequest at 'https://www.mozilla.org/' from origin 'https://radiusofficefurniture.ie' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Kindly someone help me how can I check if the URL of other domains exists using javascript?
Actually, I have to add an HTML tag to my site if the URL of other domains exists.
The easiest way is to use a CORS Proxy (if you want to avoid any extra code). You can find a couple here, and they're all relatively easy to set up.
I am trying to connect to Denodo to pull back information via an API call, but I have to go through Data Power for security reasons. When bypassing Data Power, we are able to successfully retrieve the data from Denodo. I have been informed that everything is set up in Data Power correctly for the response headers and the configuration is set to allow our web application. Below is the code we use to make the call:
var xhr = new XMLHttpRequest();
xhr.open("GET", "target URL", true);
xhr.withCredentials = true;
xhr.setRequestHeader('Access-Control-Allow-Origin', 'source URL');
xhr.setRequestHeader('Access-Control-Allow-Credentials', 'true');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.response);
console.log(xhr.responseText);
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
We receive the following error in the console when executing the function:
Access to XMLHttpRequest at 'target URL' from origin 'source URL' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
We have tried a variety of different options to get this to work, but we still can't. I've searched the forums for similar issues, and the responses have been tried unsuccessfully.
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
I'm trying to call an API in JavaScript, if I write it in the URL bar, it works but if I use my code, it has CORS policy problem. I don't have any access to the server and I should find a way to solve in the client side.
This is my code:
var xhr = new XMLHttpRequest();
var url = 'http://api.openweathermap.org/data/2.5/weather?q=London&APPID=My-API-Key';
xhr.open('GET', url, true);
xhr.withCredentials = true;
xhr.setRequestHeader("APPID", "MY API Key");
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Origin', '*');
//console.log(json);
xhr.send();
xhr.onload = function () {
if (xhr.status != 200) {
alert(`Error ${xhr.status}: ${xhr.statusText}`);
} else {
alert(`Done, got ${xhr.response.length} bytes`);
}
};
xhr.onprogress = function (event) {
if (event.lengthComputable) {
alert(`Received ${event.loaded} of ${event.total} bytes`);
} else {
alert(`Received ${event.loaded} bytes`); // no Content-Length
}
};
xhr.onerror = function () {
alert("Request failed");
};
</script>
and it has the error:
Access to XMLHttpRequest at 'https://api.openweathermap.org/data/2.5/weather?q=London&APPID=My-API-key' from origin 'https://localhost:44399' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Anybody has Idea how to solve this error? where should I send my Origin or anything else as a header to get the correct response from the server?
I should handle it in the client side and also I have written the Origin * in the header but still not working.
Best Regards
have you tried to use the "allow-origin: *" Header on your server ?
It's maybe the cause of the problem (your server doesn't accept theses requests)
I use this JQuery method on page to check if image exists:
function imageExists(imageUrl) {
var http = new XMLHttpRequest();
http.open('HEAD', imageUrl, false);
http.send();
return http.status !== 404;
}
If I load the page in browser, it works great, but if I go to the next page and then go back to this page the script does not work correctly. There is error in browser console:
Access to XMLHttpRequest at 'https://server/image.jpg' from origin 'http://client' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This error occurs only when I back from another site page to this page in Chrome browser. There is no error in Firefox and Edge browsers
Thanks!!!
This issue has been fixed by adding request header of 'Cache-Control' with 'no-cache' value:
function imageExists(imageUrl) {
var http = new XMLHttpRequest();
http.open('HEAD', imageUrl, false);
http.setRequestHeader('Cache-Control', 'no-cache');
http.send();
return http.status !== 404;
}
So I've been trying to access the twitch.tv api but every time i go to make a request i keep on getting the error:
"XMLHttpRequest cannot load https://api.twitch.tv/kraken/streams/normalice. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access."
I'm currently using the live-server package during the development process other wise I'm just using html, css, javascript. Here is my javascript:
var req = new XMLHttpRequest();
var url = 'https://api.twitch.tv/kraken/streams/normalice';
req.open("GET", url, true);
req.send();
req.onreadystatechange = function () {
if (req.status == 200 && req.readState == 4){
// do stuff here
console.log('hurray it worked');
}else{
console.log(req.statusText);
console.log(req.responseText);
}
}
Does anyone have any ideas as to why am I encountering this error?
The Twitch.tv API doesn't support CORS. You need to use JSON-P (aka JSONP) to work around it. Read more about that in the Twitch.tv API docs. There is a prior answer on how to make a JSONP request with native JavaScript that may be useful.