Wikipedia API + Cross-origin requests

Question

I'm trying to access Wikipedia using JavaScript and CORS.

As far as I know, Wikipedia should support CORS: http://www.mediawiki.org/wiki/API:Cross-site_requests

I tried the following script: create a XMLHttpRequest+credential/XDomainRequest, add some HTTP headers ("Access-Control-Allow-Credentials", etc.) and send the query.

http://jsfiddle.net/lindenb/Vr7RS/

var WikipediaCORS=     {         setMessage:function(msg)         {             var span=document.getElementById("id1");             span.appendChild(document.createTextNode(msg));         },         // Create the XHR object.         createCORSRequest:function(url)         {             var xhr = new XMLHttpRequest();              if ("withCredentials" in xhr)             {                 xhr.open("GET", url, true);             }             else if (typeof XDomainRequest != "undefined")             {                 xhr = new XDomainRequest();                 xhr.open(method, url);             }             else             {                 return null;             }             xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");             xhr.setRequestHeader("Access-Control-Allow-Origin", "*");             return xhr;         },         init:function()         {             var _this = this;             var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=Javascript&format=json';             var xhr = this.createCORSRequest(url);             if (!xhr)             {                 this.setMessage('CORS not supported');                 return;             }              xhr.onload = function()             {                 _this.setMessage(xhr.responseText);             };             xhr.onerror = function()             {                 _this.setMessage('Woops, there was an error making the request.');             };             xhr.send();         }     }; 

But my script fails ('xhr.onerror' is called). How can I fix it?

Answer 1

I had the same problem while working on a freeCodeCamp project and the solution was so simple it made me laugh, since I had spent hours searching for it. In your jQuery URL include the parameter below.

&origin=*

Working CodePen

$.getJSON(   'https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search' +   '&origin=*' + // <-- this is the magic ingredient!   '&gsrsearch='q, function(data){ /* ... */ } );