While running following code, getting CORS error and getting alert as "FAIL". What to do to make it success not fail. Please suggest.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>XML Data Load Test</body>
<script>
$(function() {
$.ajax({
type: "GET" ,
url: 'https://www.w3schools.com/xml/plant_catalog.xml',
dataType: "xml" ,
success: function() {
alert("Success");
},
error: function() {
alert('Fail');
}
});
});
</script>
</html>
Getting error and alert as "FAIL"
It's a cross-site request so you will need cross-origin resource sharing enabled. that is two headers requesters send Origin: URL and the service should respond Access-Control-Allow-Origin: URL header
It is simply explained on Wikipedia https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Solution TIP: if this is a public resource and does not provide access control headers you will have to read it on your server and serve from there to your browser.