0

I am trying to create Wikipedia search page with Wikipedia API. When I type the link I created i successfully see the json file on my browser. But when I try to get that json with jQuery.ajax() method it fails. I made research and found that same-origin policy causes that problem since Wikipedia link has HTTP but I am making https request. I already tried dataType: "jsonp" solution. Didn't work for me. What should I do in order to use my Wikipedia json link? I am a beginner and not native English speaker btw. Please consider that in your responses.

Here's my codepend project: https://codepen.io/emred2700/details/vjeWRz/

Here's the code: 

$("#sbmt").on("click", function(){
  var $searchWord = $(".s-bar").val();
  var url = encodeURI($searchWord);
  var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + url + '&format=json&callback=wikiCallback';
    
  $.ajax({
    url: wikiUrl,
    dataType: "jsonP",
    success: function(response){
      console.log(response[1]);
    }
  });
  
});

Here's the error on my console:

jquery.min.js:2 Mixed Content: The page at 'https://codepen.io/emred2700/pen/vjeWRz?editors=1010' was loaded over HTTPS, but requested an insecure script 'http://en.wikipedia.org/w/api.php?action=opensearch&search=asda&format=json&callback=wikiCallback&callback=jQuery33108891831563559673_1525711553641&_=1525711553642'. This request has been blocked; the content must be served over HTTPS.

Brian Mains
  • 50,520
  • 35
  • 148
  • 257
emred2700
  • 59
  • 6
  • Well, that error is telling you that you should make the request over https, so that's step one. After that, there are two questions related to CORS. The first being, does wikipedia allow requests to that endpoint from any location? If it doesn't, then the second question is does wikipedia support jsonp on that endpoint? Not all endpoints support jsonp. If neither of those are possible, then really your only recourse is to make a script on your own server that will hit wikipedia, rather than the client browser, to get the data. This "proxy" method will not encounter CORS restrictions. – Taplar May 07 '18 at 17:07
  • Add `add origin=*` to the URL query params, and see the answer at https://stackoverflow.com/questions/37106041/does-wikipedia-api-support-cors-or-only-jsonp-available/37109743#37109743 – sideshowbarker May 07 '18 at 17:22
  • I've already tried origin=* solution. Didn't work for me. – emred2700 May 07 '18 at 17:38
  • try https ://en.wikipedi instead of http: //en.wikipedi because both woks. – Emeeus May 07 '18 at 17:49
  • Well change the link to HTTPS... this has nothing to do with same-origin policy btw, this is a [mixed content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) warning that only cares about protocol, not domain. – Tgr May 08 '18 at 09:52

0 Answers0