jQuery 与浏览器的同源策略（使用 OData）答案

【问题标题】：Same Origin Policy for jQuery vs Browser (with OData)jQuery 与浏览器的同源策略（使用 OData）
【发布时间】：2011-05-04 02:22:28
【问题描述】：

我正在构建一个 AJAX 应用程序来查询 OData 端点。我一直在对 Netflix OData 提要进行一些测试，发现了一些我没有得到的东西：

当我向 url（例如 http://odata.netflix.com/v1/Catalog/Titles）发出 .ajax() 请求时，我收到错误消息：“Access-Control-Allow-Origin 不允许 Origin null”。但是，当我将相同的 url 放入浏览器时，请求会通过并且我得到响应。

我没有得到的根本区别是什么？浏览器如何绕过同源策略？

【问题讨论】：

标签： javascript jquery odata same-origin-policy

【解决方案1】：

我还将 JSONP 用于 Netflix 的 OData。它似乎适用于我的应用程序。我已经在我的博客http://bit.ly/95HXLM下发布了代码和解释

下面还有一些示例片段：

49.        // Make JSONP call to Netflix
50.     $.ajax({
51.            dataType: "jsonp",
52.            url: query,
53.            jsonpCallback: "callback",
54.            success: callback
55.            });
56.        });
57. 
58.    function callback(result) {
59.        // unwrap result
60.        var movies = result.d.results;
61. 
62.        $("#movieTemplateContainer").empty();
63.        $("#movieTemplate").tmpl(movies).appendTo("#movieTemplateContainer");
64.    }

【讨论】：

这个 jsonpCallback 是特定于 Netflix odata 端点还是与所有（或许多）Odata 服务通用？

【解决方案2】：

同源策略适用于从加载了远程站点页面的代码中发出的 HTTP 请求。机器不允许该代码发出对来自不同域的内容的新请求，假设您作为控制用户可以从 haxors.r.us 获取内容，但您不希望该站点发出未经您同意，向 bankofamerica.com 发出 HTTP 请求。但是，浏览器应该允许您（控制权的用户）向任何地方发出 HTTP 请求。确实，随着人类逐渐消失在机器的阴影下，我要求它。 我要求！

您可以从您的服务器 向该 URL 发出请求，然后将响应传递给客户端上的代码（在您的服务器代码可能选择执行任何类型的过滤或提取之后）。或者，Netflix 可能支持 JSONP API，这将允许您的客户端代码在脚本获取时发出 GET 请求，结果将被解释为 Javascript 代码。

另外需要注意的是，这个策略与 jQuery 本身没有任何关系。这是 XMLHttpRequest 机制的基本安全规则。

【讨论】：

是的，我一直在 JSONP 中发出请求（指定回调），它适用于除了检索 OData $metadata 文档之外的所有内容。为此，我可以将请求通过，并返回数据（以 XML 格式），但我认为它会尝试将其作为脚本执行。有什么办法可以规避这个问题，还是我应该把它变成一个新问题？ :P
好吧，如果 Netflix URL（或 API，无论你想怎么称呼它）正在返回 XML，那么你对此无能为力。是否有返回 JSONP 结果的相关 URL？ JSONP 的工作方式是客户端库动态创建一个新的<script> 元素，因此浏览器发出 GET 请求，然后执行返回的 Javascript。如果它不是不是 Javascript，那么它就是行不通的。