Access-Control-Allow-Origin with Wikipedia API with Javascript

Question

Trying to receive a response from the Wikipedia API on Codepen. The reply should be a json which i'm trying to console.log.

In the console however I see an error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=opensearch&search=earth&format=json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I've read quite a bit over the past few days about CORS and Allow-Origin to try to understand but for some reason even when I think I understand... I cannot manage to implement :)

However, the most interesting thing is this - even though console shows such an error message if I look at the actual response in developer tools Network tab, I see the json response in all its glory!

It would be great to have an explanation how is that possible?

Codepen link here

var xhrObject = new XMLHttpRequest();

xhrObject.onreadystatechange = function() {
  if (xhrObject.readyState === 4 && xhrObject.status === 200) {
      console.log(xhrObject.responseText); 
    }
};

xhrObject.open(
  "POST", "https://en.wikipedia.org/w/api.php?action=opensearch&search=earth&format=json", true
);
xhrObject.send();

Thanks in advance

sideshowbarker · Accepted Answer · 2021-10-03T22:58:51.290

Add origin=* to the query params of the Wikipedia URL you use, and the request will work.

To make JavaScript Fetch/XHR requests to the Wikipedia API work, you must include origin=* in the URL query params—per the CORS-related docs for the Wikipedia backend:

For anonymous requests, origin query string parameter can be set to * which will allow requests from anywhere.

So the URL in the question should be like this:

"https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=earth&format=json"

…or even like this:

"https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=earth="

(That is, I think you can omit format=json because JSON output seems to be the default.)

score 2 · Answer 2 · answered Feb 06 '17 at 20:56

However, the most interesting thing is this - even though console shows such an error message if I look at the actual response in developer tools Network tab, I see the json response in all its glory!

It would be great to have an explanation how is that possible?

The point of the Same Origin Policy is to prevent Mallary (the author of a malicious website) from using Alice's web browser (which has Alice's cookies and Alice's IP address and various other information that identifies it as Alice's browser) to read secret data from Bob's website (which might be Alice's online banking or company Intranet).

Mallary's JavaScript isn't allowed to access the data unless Bob tells Alice's browser that it is safe to let the JS read it (with CORS).

Alice's browser is allowed to access the data, because Bob already trusts Alice with the data. Mallary doesn't have access to the developer tools in Alice's browser.

So Wiki API trusts my browser but I cannot access it from Codepen because its hasn't been approved? How is that done, by adding request headers with what domain? Codepens or the Wiki? — ErezBerez, Feb 06 '17 at 21:20
Wikipedia has to do it. It would be stupid if you were able to give yourself permission. — Quentin, Feb 06 '17 at 21:35

score 0 · Answer 3 · answered Nov 21 '19 at 11:39

Those whoever facing issue again after adding origin=* . Try 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 (readyState == 4 && status == 200) {
        console.log(responseText)
    }
};
xhttp.open("GET", url, true);
xhttp.withCredentials = false;
xhttp.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhttp.send();

Access-Control-Allow-Origin with Wikipedia API with Javascript

3 Answers3

Linked