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.
Related
I'm using an HTTP-request in order to get Google's autocomplete suggestions, here's what inspired me to do so:
You can make a GET request to the following URL:
http://suggestqueries.google.com/complete/search?client=chrome&q=cats
Where "client" param is your browser's name (works with most but you may pass >the same type disregarding what the user is currently on and it will still work).
And "q" param is your search string.
This will return you a list of suggested items which you can then put into a jQuery autocomplete plugin or build your own (you can't just get the whole >google dropdown interface to popup with a single function sadly :) )
(src: Add Google autocomplete to Google search bar?)
I'm using this function to get Google's response text:
function httpGetAsync(theUrl, getGoogle){
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
getGoogle(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
However, when the funtion is executed, CORS seems to prevent me from getting a response: Failed to load http://suggestqueries.google.com/complete/search?client=chrome&q=xx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
Is there a way of adding an 'Access-Control-Allow-Origin' header to the resource?
You cannot make a request to another domain from the users browser, unless the source has the Access-Control-Allow-Origin header for your domain. In conclusion, you cannot make the request on the users part without using some kind of proxy, like this one:
https://cors-anywhere.herokuapp.com/
Example:
url: https://cors-anywhere.herokuapp.com/https://google.com
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 4 years ago.
I have a single html page which is deployed in xampp page which has a script tag where i use XMLHttpRequest to call a service url to get json data.
This only works when i call the page with http://localhost/mypage
But when i call the same page from another computer http://ipadress/mypage it throws an error.
“No 'Access-Control-Allow-Origin' header is present on the requested
resource”
I tried using JSONP solution but that didn't work either
Note that i can only manipulate client-side code (javascript), i have no control on the service i'm calling
Why does it work with localhost but it doesn't work with ipadress?
And what are the alternative solution if there are any ?
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result = JSON.parse(this.responseText).result;
document.getElementById("data").innerHTML = result + "%";
}
};
var url = "www.url.com";
xhttp.open("GET", url + "/data.json", true);
xhttp.setRequestHeader("content-type", "application/json");
xhttp.send();
So you trying to retrieve data form a different domain than you application is actually from. You have to specify for your served page that it is allowed to do that.
Depending on how you build/serve your html page/the content (json) this is different.
Usually this is done by setting it in the header before the response is send to the client back.
Using PHP: header('Access-Control-Allow-Origin: *');
Using apache .htaccess file (for more files, eg: if you don't use server side scripts): Header set Access-Control-Allow-Origin "*"
Better would be not to specify * but the origins the application should have access to.
Further reading:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
This is the Error i'm Getting? I have looked around almost everywhere.. I don't understand and I'm very new to this.
XMLHttpRequest cannot load
https://noodlio-pay.p.mashape.com/tokens/create. A wildcard '*' cannot
be used in the 'Access-Control-Allow-Origin' header when the
credentials flag is true. Origin 'http://localhost:8102' is therefore
not allowed access. The credentials mode of an XMLHttpRequest is
controlled by the withCredentials attribute.
controllers.js:3763 null
have you tried Enable cros on ionic. and check allow cros on server side also
I don't know how I managed to fix it but some progress and this is how I did it and it seems to work for now:
In my app.js --> .config I removed
$httpProvider.defaults.withCredentials = true;
and replaced it
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8102/', true);
xhr.withCredentials = true;
xhr.send(null);
and then worked but then when these headers where called in the controller it crashed again.
// add the following headers for authentication
$http.defaults.headers.common['X-Mashape-Key'] = NOODLIO_PAY_API_KEY;
$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
$http.defaults.headers.common['Accept'] = 'application/json';
So I decided to Add these header in the function and just call them when the button is clicked.
just like this
$scope.headerscheck = function(){
// add the following headers for authentication
$http.defaults.headers.common['X-Mashape-Key'] = NOODLIO_PAY_API_KEY;
$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
$http.defaults.headers.common['Accept'] = 'application/json';
}
but now I don't know how to kill the scope function after use without doing a refresh.
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.
I tried to manage editing the template but I'm still not able to send email, I'm creating an subscription box, here's my code so far:
var x= document.getElementById("emailtxt").value;
var uploadFormData = new FormData();
uploadFormData.append("email", x);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://realfashionstreet.com/Emailme.php',true);
xhr.onload=function() {
alert(this.status);
if(this.status==200) {
console.log('data sent');
alert(xhr.responseText);
} else {
//alert(this.status);
alert('Something Went Wrong, Try Again Later!');
}
};
/*xhr.addEventListener("load", function () {
document.getElementById('skm_LockPane').className= 'LockOff';
}, false);*/
xhr.send(uploadFormData);
return false;
}
Here's the box I'm getting :
http://realfashionstreet.com
It's just not showing any error or any response and also not sending email, but I think that site template doesn't allow to use php files if anyone have any other idea on how to send email using javascript…
Thanks
You can't for security reasons. See the same origin policy for JavaScript.
There are some workarounds that exploit browser bugs or corner cases, but using them is not recommended.
The best approach is having a server-side proxy that receives Ajax requests, and in turn, sends HTTP requests to other servers. This should be carefully implemented by sanitizing input and whitelisting the types of requests that are sent, and the servers that are contacted.
You're missing the www. in the request, this is causing a cross domain policy violation. This is the error I see in the console.
XMLHttpRequest cannot load http://realfashionstreet.com/Emailme.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.realfashionstreet.com' is therefore not allowed access. Default.asp:1
Ensure the URLs for the page and the XHR request have the exact same domains. Including subdomains like www