javascript - 访问纽约时报 API 和维基媒体 API 之间的区别？

Question

我目前正在使用Udacity Front-End Web Developer Nanodegree当然，我正在学习 AJAX 类(class)。

我的项目是获取地址并且:

• 加载《纽约时报》文章
• 从 Google 街景加载背景图片
• 从维基百科加载相关文章

前两个我已经完成了。第三个需要 jsonp 或 CORS，我的问题是:为什么？

前两个运行良好的调用之间有什么区别:

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

这个失败了？

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

注意:以上网址为:

• 使用 jQuery.getJSON() 搜索文章(纽约时报)
• 用作背景图片的src(Google 街景)
• 使用jQuery.ajax()(维基百科)搜索相关文章

维基百科尝试的错误消息是:

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

重申一下:维基百科试图阻止什么情况？

更新:

实际使用的网址是:

• 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

Answer 1

我并不是 100% 理解维基媒体试图阻止的事情......

同源策略是您问题的根源，它是来自 Web 应用程序安全模型的指令，要求来自一个页面(HTML 文档等)的脚本与以下内容具有相同的来源:另一个页面，以便访问该其他页面的数据。

这堵真正的墙可以防止所有脚本小子在网站上造成严重破坏和困惑。与所有长城一样，同源策略是双向的:如果您有要消费/使用的数据/访问/服务，您的选择将受到严重限制。

其中一个选项是 Google map /API 选项，您可以在其中注册、获取 key 、通过身份验证绕过同源策略。

另一个选项是 JSONP，其中“P”是围绕 JSON 数据的函数。该函数的有效负载 JSON 可供来自不同来源的脚本访问，因为它作为对象提供服务，并进入 JS 全局命名空间。调用该函数会导致浏览器将返回负载评估为 JavaScript，并允许其跨源。

第三个选项是 CORS - 跨源资源共享。它通过根据预选源列表检查发出请求的源来克服同源策略。如果源位于列表中，则会在服务器的 header 响应中返回，从而授予访问权限。

同样，我不完全确定为什么维基媒体使用 JSONP 和 CORS 来克服同源政策，但允许成员站点之间的访问必须是其背后的主要驱动力。