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

Posted 2023-02-27

【中文标题】当浏览器存在同源策略时，REST API 如何与 JavaScript 一起使用？

【英文标题】：How do REST APIs work with JavaScript when the same-origin policy exists for browsers?

【发布时间】：2012-12-19 00:14:53

【问题描述】：

我正在使用 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");

【参考方案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 

【讨论】：

很好的答案，伊万。我的问题是，你是说在 javascript 中，它使用的任何 REST API 都需要像上面的例子那样的机制吗？或者换句话说，所有 REST API 开发人员在开发时都应该考虑跨域问题？

@technophyle -- 是的，它认为是的。浏览器中 JavaScript 发出的远程请求会受到 SOP 的影响，因此 API 开发者如果希望 API 可供此类客户端使用，则需要考虑这一点。