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

问题

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

回答1:

Add origin=* to the query params of the Wikipedia URL you’re using, 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.)

回答2:

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.

回答3:

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();

来源：https://stackoverflow.com/questions/42077084/access-control-allow-origin-with-wikipedia-api-with-javascript

标签

javascript

json

cors

wikipedia-api