使用 Sinatra 的跨域 AJAX 请求不起作用 - 使用 jQuery.ajax 发送 JSON答案

【问题标题】：Cross domain AJAX Request with Sinatra not working - sending JSON with jQuery.ajax使用 Sinatra 的跨域 AJAX 请求不起作用 - 使用 jQuery.ajax 发送 JSON
【发布时间】：2015-01-22 06:23:58
【问题描述】：

在我的 sinatra 应用程序的服务器上，我有以下设置：

before do
  headers 'Access-Control-Allow-Origin' => '*',
          'Access-Control-Allow-Methods' => ['OPTIONS', 'GET', 'POST'],
          'Access-Control-Allow-Headers' => ['Content-Type', 'Accept', 'X-Requested-With', 'access_token']

  env['rack.errors'] = error_logger
end

在我的前端应用程序中，我执行以下 http 请求：

$.ajax({
        type: "POST",
        url: "http://findaspot.multimediatechnology.at/api/",
        data: json,
        dataType: "json",
        success: function (data) {
            console.log('Success!');
            console.log(data);
        },
        error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
        }
    })

我总是收到此错误消息：

XMLHttpRequest cannot load http://findaspot.multimediatechnology.at/api/. Invalid HTTP status code 404

该错误与对服务器的预检 OPTIONS 请求有关 - 因为我正在发送 JSON - 我已经尝试将 jQuery.ajax 选项“异步”设置为 false - 也不起作用。

到目前为止，我不知道如何解决这个问题。如果你们能帮帮我就好了。

【问题讨论】：

我的理解是，标头 Access-Control-Allow-Origin 应该由您向其发出请求的主机提供，而不是由发出 XHR 请求的客户端提供。另一种选择是让他们启用 CORS 并将引用者设置为您的域，他们必须设置 CORS 以允许您的域进行调用。

标签： jquery ajax sinatra

【解决方案1】：

你正面临这两个问题之一。

错误说明了 404，因此在 Sinatra 中您还没有为该 URL 创建采用 OPTIONS 方法的路由（控制器），404 错误是正确的。

您可以像创建 GET、POST、PUT、DELETE 路由一样指定此路由，但您也可以将其集成到您的 before 过滤器中：

# return directly with 200 if request method is options
halt 200 if request.request_method == 'OPTIONS'

这将通过 200 OK 批准所有传入的 OPTIONS 请求。将不再有 404。这不是安全问题，因为您定义了允许哪个来源以 CORS 方式请求 API。

您的问题很可能是第一个提到的问题，但您稍后也会遇到这个问题。

在 CORS 世界中，某些 HTTP 操作的源 (Access-Control-Allow-Origin) 不能设置为任何主机 (*)。

您可以通过指定正确的原点来解决此问题，如下所示：

'Access-Control-Allow-Origin' => 'https://the.url.sending.requests.to.the.api'

通常您希望从不同的来源调用您的 API，因为您有不同的环境（开发、测试、阶段、生产）。要存档此文件，您需要一个位代码，将允许的来源设置为请求的环境。 但要小心，不要做任何事情都允许的事情！

一种可能的方法是在您的应用程序配置中手动定义允许的来源。当 CORS 请求进入时，检查 before 过滤器是否该请求是从您信任的一个来源发送的，并将其即时设置为 Access-Control-Allow-Origin。

【讨论】：