0

我正在学习 Web 开发，并试图发出 ajax 请求，以通过他们的REST API查询托管在 MongoLab 中的 MongoDB 数据库。我的代码很简单，但是我不明白为什么ajax请求总是出错。帮助？

<doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>

    <title>Data Viewer</title>
</head>
<body>
    <form id="the_form" method="post">
        <input type="submit" value="Go" />
    </form>

    <script>
        $(function() {
            $('#the_form').submit(function() {
                $.ajax({
                    url: 'https://api.mongolab.com/api/1/databases/omnitor-android/collections/logs?apiKey=[some API key in here]',
                    type: 'GET',
                    success: function(data) {
                        alert(data);
                    },
                    error: function() {
                        alert("boom");
                    }
                });
            });
        });
    </script>
</body>
</html>
4

5 回答 5

3

这是因为您试图调用托管在不同域中的服务。由于同源策略，Ajax 不允许跨域请求。您不能使用 ajax 调用外部站点。如果你真的想使用，你必须使用JSONP。或者您可以为此使用服务器端代理。意思是，在服务器端调用外部站点并对那个 web 服务进行 ajax 调用。

有关如何执行跨域 ajax 请求的更多详细信息，请点击此链接。

于 2013-02-06T06:03:46.230 回答
2

MongoLab REST API 完全支持 CORS，因此大多数浏览器应该能够毫无问题地向它发出请求。尝试将此添加到您的 js 代码的顶部：

$.support.cors = true;

您是否尝试过使用大多数浏览器（例如 FireBug）中内置的调试控制台？您可能可以在那里找到更详细的错误消息。

此外，请随时联系 support@mongolab.com 寻求帮助。

于 2013-02-06T19:25:37.003 回答
0

克服同源策略限制的方法有以下三种：

  1. CORS（跨源资源共享） - 虽然需要在服务提供商的服务器端进行一些额外的配置，但它是最理想的解决方案，尤其是在您的情况下，因为 MongoLabs 确实提供了对这种方法的支持 - 在开发人员端没有额外的工作。
  2. 服务器端代理 - 创建一个本地服务器，将您的请求路由到原始服务器。尽管需要在您端进行配置服务器的工作，但它将帮助您完全避免同源策略限制。
  3. JSONP（带有填充的 Java Script Object Notation - 在我看来，这应该是最后的手段，因为与这种方法相关的安全风险以及必须为所有请求坚持一个 HTTP 动词（GET）的限制。
于 2013-10-06T22:02:46.310 回答
0

Mongolab 确实支持 CORS。这意味着您不会在 IE* 和 Opera ( http://caniuse.com/cors ) 中获得太多支持。要将它用于支持 CORS 的浏览器，您必须确保在 jQuery ajax 请求中将 dataType 设置为“json”。

      $.ajax(
            {
                url         : url
            ,   type        : "GET"
            ,   dataType    : "json"
            ,   success     : function( data )
                {
                    // do something
                }
            });

为了获得更多浏览器支持，我建议使用简单的代理（例如在 PHP 中）。你可以使用类似的东西；

var xhr = new XMLHttpRequest();
  if ( ! "withCredentials" in xhr) {
    // Use proxy in ajax call
    //
  }
  else {
   // Standard CORS call
   // 
  }
于 2013-02-15T16:59:50.953 回答
0

由于对 ajax 请求施加的同源策略约束，它不起作用。同源策略防止浏览器发出跨域请求。

解决此问题的方法是使用jsonp。大多数 API 提供者都支持这个协议，像 jQuery 这样的库也支持这个协议。

如果您检查浏览器控制台，您会发现类似

Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

您可以使用jQuery.getJson() 之类的

$.getJSON('https://api.mongolab.com/api/1/databases/omnitor-android/collections/logs?apiKey=[some API key in here]?callback=?', function(data) {
    console.log('xx')
});
于 2013-02-06T06:14:06.613 回答