javascript - 想要使用 ajax 访问另一个域的内容？

Question

我正在尝试编写一个从 openstreetmap API (http://wiki.openstreetmap.org/wiki/OSM_Protocol_Version_0.6) 加载数据的 javascript 应用程序，它基本上只是一个安静的 xml api。我正在尝试使用 jquery 来访问 XMl。但是我收到安全错误。这是一个跨站脚本拦截。

如何访问该 XML？ AFAIK OSM 不提供 jsonp，所以这不起作用。到底有没有？>

Answer 1

绕过跨站点脚本的两种方法是设置服务器端代理来调用 url，而脚本调用服务器端代理。另一种方式是使用script标签调用数据，对跨站调用没有限制。

Answer 2

Dan 链接的博客文章向您展示了如何解决这个问题，但这里是背景：

从网页进行跨域 Javascript 调用的唯一方法是通过 JSONP。如果没有为您提供 JSONP，那么您将不得不求助于使用代理脚本，因为浏览器会故意阻止站点脚本进行此类调用。

请注意，如果您正在编写 Firefox 扩展程序，则您是在特权空间中执行的，因此可以不受限制地进行此类跨域调用。

Answer 3

OpenStreetMap 的 Nominatim API 现在支持 JSONP，因此您可以纯粹通过客户端代码获取数据，无需在您自己的服务器上进行任何额外操作。这是一个 jsfiddle 示例 - 如果您可以在 jsfiddle 中执行此操作，那么您可以在任何地方执行此操作。

对于如何从其他域访问 API 的更一般性的问题，这里有一些有用的东西，我在翻阅许多部分完整且经常相互矛盾的答案，并通过反复试验时学到了一些有用的东西。如果有任何不准确或变得不准确，请编辑或评论。

• 如果您不能使用支持 JSONP 的 API，则需要使用 YQL 之类的工具查看 jquery-xdomain-ajax 之类的插件并了解它们的工作原理。一般来说，这些插件似乎更适合阅读 HTML 而不是查询 API。
• 为了能够直接访问 API，它必须 a) 以 JSON 格式提供结果并且 b) 具有内置 JSONP 支持，这意味着：-
  • API 必须设置为侦听一个参数，该参数告诉它要包装其结果的函数的名称
  • 您必须找出该参数的名称。在 OSM 的情况下，它被称为 json_callback，jQuery 的默认 callback 仅在偶然 API 被编程为监听的情况下才会起作用
  • 使用 jQuery，这个特定于 API 的参数键应该在查询 URL 的末尾加上 ?（例如，如果是 json_callback，那么是 someurl.com/api?json_callback=?）。 jQuery 弄清楚这是什么，将? 替换为jQuery1712164863864387412 之类的字符串，用相同的字符串命名内联函数，然后等待接收一些按名称触发该函数的代码并将JSON 传递给它。
    • 如果请求有效但回调未触发并且您看到类似parseerror jQuery17109935275333671539_1300495251986 was not called 的错误，这意味着 jQuery 具有已命名、准备就绪和等待的函数，但 API 没有使用该字符串来包装 JSON，所以未调用该函数 - 可能意味着您没有使用正确的参数名称
  • 如果没有 jQuery，您需要向该参数键传递将接收 JSON 的命名函数的名称
• 由于基本上所有发生的事情都是浏览器正在加载，然后以受控方式运行相当于someFunction({"some": "argument"}); 的 JavaScript 代码的 sn-p，因此错误处理是有限的（但如果您使用完整的，请参阅 jsfiddle 以了解 jQuery 提供的内容$.ajax 语法而不是精简的 $.getJSON 快捷方式）
• 对我来说，在 Firebug 中，至少 JSONP 请求不会像其他 AJAX 调用那样出现在控制台中，而是位于 NET 面板的底部（因为在后台，它本质上是一个迂回的加载代码的方式，处理方式更像是<script>)。

希望这会对某人有所帮助！