No 'Access-Control-Allow-Origin' header is present. Origin is therefore not allowed access

Question

EDIT: No JSONP! Yes i know CORS is handled by the server and Yes the server does support it. The issue is on my side.

I am trying to use MediaWiki API from the browser. I am sending a GET request through XMLHttpRequest but due to CORS issues it's just not working. I am getting the following message from my browser after it receives the response:

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

I understand why i am getting this issue but i do not know how can i solve it from the browser/JavaScript side.

Code:

xmlhttp.open("GET","https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=" + subreddit + "&utf8",true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xmlhttp.send();

Some of the things i've tried:

xmlhttp.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost');
xmlhttp.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
xmlhttp.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
xmlhttp.setRequestHeader('Access-Control-Allow-Credentials', true)
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

and setting the parameter origin in the url or as setRequestHeader which returned a invalid/bad Origin, denied.

Answer 1

You can use JSONP.

<script src='https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8&callback=callbackname'></script>
<script>
    function callbackname(data){
       //you can get response data here
    }
</script>

If you use jquery.

$.getJSON('https://en.wikipedia.org/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8&callback=?', function(data){
    //you can get response data here
})

Answer 2

As mentioned here, the origin parameter that you're passing in the request, and Origin header that is sent by your browser in the AJAX call should match and also it must match one of the values in $wgCrossSiteAJAXdomains on the foreign wiki. As your Origin (http://127.0.0.1:8000 or localhost:8000 in your case) won't be available in $wgCrossSiteAJAXdomains, MediaWiki API will never send Access-Control-Allow-Origin header in the response and any CORS request will fail with the error that you're seeing in your browser's console.

Another important fact to consider is that

MediaWiki API is used on Wikimedia sites to do things like allow image uploads directly to Commons from Wikipedia sites on the mobile interface.

This API is not for public consumption from any host, it's just for a set of validated hosts.

If you want to try some CORS requests, you can use GitHub API from here. Here's a sample pen making a CORS request to GitHub API and the JSON response is logged to DevTools Console.

Answer 3

It is not currently possible to do what you want because there is a server-side whitelist of origins for which CORS is allowed, and your server is not on the whitelist.

Currently there is no option in MediaWiki for auth-less CORS, so the whitelist is applied to all CORS requests, whether they include auth or not.

See https://phabricator.wikimedia.org/T62835 and https://www.mediawiki.org/wiki/Manual:CORS