Access-Control-Allow-Origin Error

Hi, I’m trying to do the wikipedia viewer challenge and I’ve found a problem I cannot solve.

I always get Access-Control-Allow-Origin from wikipedia API.

I’m trying to get it working with JSONP.

What I cannot understand is why the random quote machine work while wikipedia return that error.

// javascript file
  wikiURL = "http://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&generator=search&exlimit=10&exintro=1&explaintext=1&gsrsearch=vancouver";
  
  randomQuoteURL = "http://quotes.stormconsultancy.co.uk/random.json";
  
  $.getJSON(randomQuoteURL, function (a) {
    alert(a.quote);
  });
  
  $.getJSON(wikiURL, function(a) {
    alert(a);
  });

Is it due to the server? what am I doing wrong?

thank you

1 Like

Add &origin=* to your query and it should work.

https://www.mediawiki.org/wiki/Manual:CORS

8 Likes

Thank you.

You gave me the fish, I’d like to learn fishing.

I searched for the HTTP access control.
Let me explain what I found and if I understood.

example:

My browser prevents MYUNIVERSITY to see MYBANK resources (cookies, data etc…) by default.

If MYBANK add the header “Access-Control-Allow-Origin” with the URI of MYUNIVERSITY then the univ can access the resources.

If MYBANK add “Access-Control-Allow-Origin: *”: than anyone can access the resources.

Back to my example: wikipedia API add the header "Access-Control-Allow-Origin: * " just if asked through the “&origin=*”; while randomQuote add it by default.

Am I right?

1 Like

I had the same problem here, and to add &origin=* worked just fine to me.
It would be nice if someone could explain why this happens, because I don’t think I really understood the mechanism.

1 Like

Thanks alot! this solved it. I was stuck on this for ages!!

So, after tons of reading, and etc, and etc. I could not find the solution until I came across this post. Angels Singing HOW COULD I MISS THAT. The reason why &origin=* is that your browser has a security feature that prevents it from calling anything unless it is from the same domain. Meaning that if you had a webpage from domain A (or where you put your stuff) it will all load fine and dandy, but once you start calling things from domain B, (or other domains) your browser needs an ‘Access-Control-Allow-Origin’ header, and does this behind the scenes. I think you can actually set it to specifically allow certain assets to be imported, or using the * can allow all recourses to be called. Now, I’m not 100% sure so correct me if you will…

You can also bypass it on most browsers with an extension.