Question

在我的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选项＆＃34; async＆＃34;是假的 - 也没有工作。

到目前为止，我还没有任何想法如何解决这个问题。如果你们能帮帮我的话会很好。

Answer 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'

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

您的问题很可能是第一个提到的问题，但您也会在稍后面对此问题。

在某些HTTP操作的CORS世界中，原点（Access-Control-Allow-Origin）无法设置为任何主机（*）。

您可以通过指定正确的原点来解决此问题：

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

通常，您希望从不同的来源调用您的API，因为您有不同的环境（开发，测试，阶段，制作）。要对此进行存档，您需要一些代码，用于将允许的原点设置为请求的环境。 但要注意，不要做一些允许一切的事情！

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

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

1 个答案: