[ACCEPTED]-Wikipedia API + Cross-origin requests-wikipedia-api

I had the same problem while working on 4 a freeCodeCamp project and the solution was so simple 3 it made me laugh, since I had spent hours 2 searching for it. In your jQuery URL include 1 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){ /* ... */ }
);

As of August 2016, Wikipedia supports CORS 12 requests by using the normal Ajax requests 11 (no need of JSONP/callback manipulation). This 10 can be done by setting the origin in the 9 API call.

For authenticated requests, this 8 must match the one of the one of the "origins" in 7 the Origin header exactly (you need to set 6 this using the beforeSend property while 5 making an Ajax call).

For unauthenticated 4 requests, you can simply set it as an asterisk 3 (*), and it works when using a simple $.getJSON 2 from your domain.

Example API call:
https://en.wikipedia.org//w/api.php?action=opensearch&format=json&origin=*&search=stack&limit=10

More 1 is at the MediaWiki API sandbox: MediaWiki API sandbox

CORS headers are sent to allow a requesting script 23 to access the contents.

Wikipedia is sending 22 the CORS, not you.

According to the comments:

Wikipedia is an exception 21 to general rule, by requiring you to append 20 an origin parameter to the URL you are requesting.

I 19 think the reason behind this is related 18 to caching. I don't know what kind of mechanism 17 they are using, but it probably makes it 16 easier and better for them to store a cache 15 object and build variations that way.

More 14 on CORS from MediaWiki API documentation:

The 13 MediaWiki API also requires that the origin 12 be supplied as a request parameter, appropriately 11 named "origin", which is matched against 10 the Origin header required by the CORS protocol. Note that this 9 header must be included in any pre-flight request, and so should be included in the query 8 string portion of the request URI even for POST 7 requests.

If the CORS origin check passes, MediaWiki will include the Access-Control-Allow-Credentials: true header in the response, so authentication 6 cookies may be sent.

This means you have 5 to send an Origin header to tell Wikipedia where 4 you are coming from. Wikipedia is managing 3 the access, not you.

Send this origin header:

xhr.setRequestHeader("Origin", "http://www.yourpage.com");

Access-Control-Allow-* headers 2 are response headers, not request headers.

Wikipedia additionally 1 requires content type json:

xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

You can use jQuery JSONP:

$.ajax( {
    url: "https://en.wikipedia.org/w/api.php",
    jsonp: "callback", 
    dataType: 'jsonp', 
    data: { 
        action: "query", 
        list: "search", 
        srsearch: "javascript", 
        format: "json" 
    },
    xhrFields: { withCredentials: true },
    success: function(response) { ... }
}

0

Adding origin=* alone with the URL was not working 3 for me so added withCredentials=false. It will work.

Those whoever 2 are facing issue again after adding origin=*: Try 1 the below one with withCredentials = false

var xhttp = new XMLHttpRequest();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=5&origin=*&search=simple";
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText)
    }
};
xhttp.open("GET", url, true);
xhttp.withCredentials = false;
xhttp.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhttp.send();

Credits to @muraliv