I have encountered this error before on this platform, and although I managed to fix it, I am seeking a more in-depth explanation of the solution.
For a project where I am learning, I decided to create a Wikipedia Viewer application. The first step was to make an API call to Wikipedia:
$(document).ready(function() {
var wiki = "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json"
$.getJSON(wiki, function(d) {
console.log(d);
});
});
However, this resulted in an error stating
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://conn3cted.uk.tn' is therefore not allowed access.To resolve this error, I added &callback=? at the end of the GET request (
https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?Although this stopped the error from appearing, I still don't completely understand how callback=? resolves the issue.
Edit: This question differs from the linked one, as I am not discussing JSONP or using <script> tags. Instead, I am curious about why adding callback=? made the API call work.