On Thu, Dec 7, 2017 at 11:17 AM, Nikola I. <nikiro60@gmail.com> wrote:
About: xhr.setRequestHeader( 'Api-User-Agent', 'Example/1.0' );

Your problem here has nothing to do with this header. Also, you'd want to specify something more identifying than "Example/1.0".
Failed to load https://en.wikipedia.org/w/api.php?action=query&prop=links&format=json&titles=Bulgaria&callback=JSON_CALLBACK:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://s.codepen.io' is therefore not allowed access.

The API only responds with CORS headers if the URL contains an "origin" parameter. For accessing from an external site like codepen.io, you'd want to specify "origin=*".

And you would not want to use the "callback" parameter in that situation, "callback" is intended for accessing a remote resource by adding a <script> tag to the header, as you might do in an old browser where XMLHttpRequest is not available.

When doing a POST, note the "origin" parameter must be in the URL's query string, not the POST body.

While it doesn't have an example for raw XMLHttpRequest, see https://www.mediawiki.org/wiki/API:Cross-site_requests and https://www.mediawiki.org/wiki/Manual:CORS for details.

Brad Jorsch (Anomie)
Senior Software Engineer
Wikimedia Foundation