The difference between accessing the NY Times API and a Wikimedia API?

Question

I am currently taking the Udacity Front-End Web Developer Nanodegree course, and I'm on the AJAX course.

My project is to take an addrress and:

load New York Times articles
load a background image from Google Streetview
load relevant articles from Wikipedia

I have the first two done. The third requires either jsonp or CORS, and my question is: why?

What is the difference between these first two calls that work just fine:

http://api.nytimes.com/svc/search/v2/articlesearch.json?q=somecity&api-key=...
http://maps.googleapis.com/maps/api/streetview?size=600x400&location=...

and this one that fails?

https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=...

Note: The above urls are:

searched for articles using jQuery.getJSON() (NY Times)
used as the src for background image (Google StreetView)
searched for relevant articles using jQuery.ajax() (wikipedia)

The error message from the WikiPedia attempt is:

No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://...' is therefore not allowed access.

To reiterate: What scenario is wikipedia trying to prevent?

Update:

The actual urls used are:

http://api.nytimes.com/svc/search/v2/articlesearch.json?q=somecity%20somestate&api-key=...
http://maps.googleapis.com/maps/api/streetview?size=600x400&location=999%20main%20st,%20somecity%20somestate
https://en.wikipedcwodecgia.org/w/api.php?action=query&format=json&list=search&srsearch=somecity%20somestate&callback=jQuery111107555398044642061_1459988112375&_=1459988112376

If using the Wikipedia API, please see http://stackoverflow.com/questions/23952045/wikipedia-api-cross-origin-requests — Akshat Mahajan, Mar 27 '16 at 19:30
Those answers do not answer my question, which is not about *how*, but *why*. — Ethan Furman, Mar 27 '16 at 19:51
do you want a request that doesn't fail or the explanation.... — albert, Mar 27 '16 at 19:55
pretty sure its mostly for legacy browser support...https://www.mediawiki.org/wiki/API:Cross-site_requests — albert, Mar 27 '16 at 19:56
yeah couldn't tell ya. want to say its security + legacy support, but would think that google would be applying the same security standards as well. not being condescending, but do you get why CORS/JSONP exist/are used in the first place? — albert, Mar 27 '16 at 20:02
good on you....hopefully i can get back to you on this later tonight... — albert, Mar 27 '16 at 23:09
@albert: Any chance you can answer? No one else is stepping up to the plate. :( — Ethan Furman, Apr 05 '16 at 04:17
good enough? more clarification or want/need resources? since you care, i'm happy to help — albert, Apr 07 '16 at 03:53
@albert: Much appreciated. I'm still not clear on the differences between the google and wikipedia methods... google doesn't require keys nor CORS/jsonp and yet it works just fine -- does http vs https have anything to do with it? If there is some good tutorial out there I'm happy to go read it. — Ethan Furman, Apr 07 '16 at 03:55
gmaps key is not in the url, i goofed that on the ?, apologies. you still have to authenticate when you sign up though. and this seems to say you have to have one. i do remember between v2 and v3 when they dropped it entirely...been using leaflet forever now so i'm out of the loop. i'll deep dive and get back to you. https://developers.google.com/maps/documentation/javascript/get-api-key — albert, Apr 07 '16 at 04:43

score 2 · Accepted Answer · edited Apr 07 '16 at 00:27

I'm not 100% on what Wikimedia is trying to prevent here...

Same-origin policy is the root of your question, a directive from the web application security model that requires scripts from one page (HTML document, etc.) to be of the same origin as another page, in order to access that other page's data.

Its the literal wall that keeps all the script kiddies from wreaking havoc and mayhem on websites. Like all great walls, same-origin policy works both ways: if you have data/access/services to be consumed/used, your options are severely limited.

One option is the Google Maps/ APIs option, where you sign-up, get a key, bypass the same-origin policy via authentication.

Another option is JSONP, where the "P" is a function wrapped around the JSON data. The function's payload, the JSON, is accessible to scripts from different origins, because its served up as an object, and enters the JS global namespace. Invoking the function causes the browser to evaluate the return payload as JavaScript and allow it across origins.

A third option is CORS - Cross-origin Resource Sharing. It overcomes same-origin policy by checking the origin making the request against a list of preselected origins. If the origin is on the list, it is returned in the server's header response, granting access.

Again, I'm not entirely sure why Wikimedia uses JSONP and CORS to overcome same-origin policy, but allowing access between member sites has got to be a major driving force behind that.

The difference between accessing the NY Times API and a Wikimedia API?

1 Answers1