Question

我正在学习Web开发，并且正在尝试通过他们的REST API发出ajax请求来查询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>

Answer 1

这是因为您正在尝试调用托管在不同域中的服务。由于Same origin policy，Ajax不允许跨域请求。你不能使用ajax来调用外部网站。如果你真的想使用，你必须使用JSONP。或者您可以使用服务器端代理。意味着，在服务器端调用外部站点并对该Web服务进行ajax调用。

有关如何执行跨域ajax请求的详细信息，请参阅this link。

Answer 2

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

$.support.cors = true;

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

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

Answer 3

由于对ajax请求施加了Same Origin Policy约束，它无法正常工作。同源策略可防止浏览器发出跨域请求。

此问题的解决方案是使用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')
});

Answer 4

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
   // 
  }

Answer 5

有三种方法可以克服同源政策限制：

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

JQuery AJAX GET请求总是返回错误

5 个答案: