Wikipedia Viewer - CORS HELP!

Hi All,

I need your help please. I’ve been struggling for a week now trying to figure out by my self how to solve but I raise the white flag.

I have two issues:

  1. Preflight request not passing the access control test

  2. If the first one is successful, I don’t know how to handle the response using a callback function.

Below is my code & the returned error in the console:

$(document).ready(function () {

    var $keyWord = $("#searchKeyWord").val();

    $(".btn").on("click", function () {
        var apiCall = $.ajax({
            url: '*&search=' + $keyWord,
            contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
            dataType: 'json',
            headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'},
            success: handleData,

    function handleData(data) {

Thanks a lot for your help'Access-Control-Allow-Origin

1 Like


my confusion about this was about setting the origin. I spent a lot of time digging through docs and jQuery source trying to figure out why I could make it work with jQuery.ajax() and not a vanilla XMLHttpRequest. So, wikiMedia API allows cross-domain requests, you just have to send the request in the correct manner. The API is expecting an ‘origin’ request parameter, not CORS headers. If you append ‘origin=*’ to the query URL that should do it.

Example with jQuery:

someElement.addEventListener('click', function() {
  var requestParams = {
    format: 'json',
    origin: '*',
    data: requestParams, 

and as an XMLHttpRequest:

xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
};'GET', '*');

1 Like