当浏览器存在同源策略时,REST API如何与JavaScript一起使用？

Question

我正在使用Flickr的REST API,它工作正常.通过这个,我的意思是我正在对Flickr API进行AJAX调用并获取JSON对象,解析对象等.

但这引起了我的疑问.如果浏览器遵循同源策略,那么他们如何制作这些类型的API请求呢？

这个DEMO小提琴正在工作,但它向Flickr域发送跨域请求.

这个跨域请求如何工作？

跨域请求:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=" +
          id + "&lang=en-us&format=json&jsoncallback=1");

Answer 1

您需要了解的是,虽然浏览器确实实施了相同的原始策略(SOP),但是在不强制执行SOP时会有例外情况.例如,如果您有一个HTML页面 - 您可以<img>在任何域上插入指向图像的标记.因此,SOP不适用于此,您正在为图像进行跨源HTTP GET请求.

您链接到的演示可以工作,因为它使用的工作方式类似.该机制称为JSONP - http://en.wikipedia.org/wiki/JSONP,我建议您阅读wiki条目和其他一些博客文章.本质上,JSONP动态注入<script>标记以向任何域发送请求(请求的参数被添加为URL查询参数),因为相同的源策略不适用于<script>标记(因为它不适用于<img>标记).

在其他域上调用REST API的另一种方法是使用跨源资源共享机制(CORS) - http://en.wikipedia.org/wiki/Cross-origin_resource_sharing.实质上,这种机制使浏览器不会拒绝跨源请求,而是询问目标服务是否要允许特定的跨源请求.目标服务通过在响应中插入特殊的HTTP标头来告诉浏览器它希望允许跨源请求:

Access-Control-Allow-Origin: http://www.example.com