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

Question

我正在使用 Flickr 的 REST API，它运行良好。我的意思是，我正在对 Flickr API 进行 AJAX 调用并获取 JSON 对象，解析对象等。

但这在我心中提出了一个问题。如果浏览器遵循 same-origin policy ，那么他们怎么能发出这些类型的 API 请求呢？

This DEMO fiddle 正在工作，但它发送了 跨域请求到 Flickr 域。

这个跨域请求是如何工作的？

跨域请求:

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

Answer 1

您需要了解的是，虽然浏览器确实执行了同源策略 (SOP)，但不执行 SOP 时也有异常(exception)。例如，如果您有一个 HTML 页面 - 您可以插入 <img>指向任何域上的图像的标签。因此，SOP 不适用于此处，您正在为图像发出跨域 HTTP GET 请求。

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

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

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