# Wikipedia Viewer - CORS HELP!

**URL:** <https://forum.freecodecamp.org/t/wikipedia-viewer-cors-help/178648>\
**Category:** General\
**Created:** [March 8, 2018, 8:24pm UTC](https://forum.freecodecamp.org/t/wikipedia-viewer-cors-help/178648 "2018-03-08T20:24:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![HaceneNasseur](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hacenenasseur/32/77564_2.png) [@HaceneNasseur](https://forum.freecodecamp.org/u/HaceneNasseur)\
**Post date:** [March 8, 2018, 8:24pm UTC](https://forum.freecodecamp.org/t/wikipedia-viewer-cors-help/178648/1 "2018-03-08T20:24:24Z")

</div>

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:

```auto
$(document).ready(function () {

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

    $(".btn").on("click", function () {
        var apiCall = $.ajax({
            url: 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&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) {
        console.log(data);
    };
})

```

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/9/1/912e10313b2d1344688babddb92ccd72a3f19e9a.png)

Thanks a lot for your help

---

<div class="post-metadata">

**Author:** ![ArielLeslie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/arielleslie/32/264841_2.png) [@ArielLeslie](https://forum.freecodecamp.org/u/ArielLeslie)\
**Post date:** [March 8, 2018, 8:26pm UTC](https://forum.freecodecamp.org/t/wikipedia-viewer-cors-help/178648/2 "2018-03-08T20:26:19Z")

</div>

[https://forum.freecodecamp.org/search?q=No%20'Access-Control-Allow-Origin](https://forum.freecodecamp.org/search?q=No%20%27Access-Control-Allow-Origin)

---

<div class="post-metadata">

**Author:** ![jams2](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@jams2](https://forum.freecodecamp.org/u/jams2)\
**Post date:** [March 9, 2018, 1:26am UTC](https://forum.freecodecamp.org/t/wikipedia-viewer-cors-help/178648/3 "2018-03-09T01:26:02Z")

</div>

Hey,

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:

```auto
someElement.addEventListener('click', function() {
  var requestParams = {
    ...
    format: 'json',
    origin: '*',
    ...
  };
  $.ajax({
    ...
    data: requestParams, 
   ...
  });
});

```

and as an XMLHttpRequest:

```auto
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  console.log(xhr.responseText);
};
xhr.open('GET', 'https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&formatversion=2&origin=*');
xhr.send();

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 6:44pm UTC](https://forum.freecodecamp.org/t/wikipedia-viewer-cors-help/178648/4 "2021-01-16T18:44:53Z")

</div>

Closed on January 16, 2021, 6:44pm UTC