Despite my efforts to understand the CORS policy by reading the MDN documentation and utilizing the code provided on https://www.html5rocks.com/en/tutorials/cors/, I am still encountering an error message while trying to fetch a specific wiki page. The error message indicates that the 'Access-Control-Allow-Origin' CORS header is missing, causing the request to be blocked due to the Same Origin Policy.
// Creating the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Helper method to extract the title tag from the response.
function getTitle(text) {
return text.match('(.*)?')[1];
}
// Making the actual CORS request.
function makeCorsRequest() {
// Using a sample server that supports CORS.
// var url = 'http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html';
var url = 'https://en.wikipedia.org/wiki/Main_Page';
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Handling responses.
xhr.onload = function() {
var text = xhr.responseText;
var title = getTitle(text);
alert('Response from CORS request to ' + url + ': ' + title);
};
xhr.onerror = function() {
alert('Oops, an error occurred while making the request.');
};
xhr.send();
}