Междоменное AJAX запрос с Синатра не работает - отправка JSON с jQuery.ajax

Question

На моем сервере в моем Синатра приложение у меня есть следующие настройки:

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 

ошибка имеет что-то делать с предполетной О.П. TIONS на сервер - потому что я отправляю JSON - я уже пытался установить параметр jQuery.ajax «async» в false - тоже не работал.

До сих пор у меня нет никаких идей, как решить эту проблему. Было бы хорошо, если бы вы, ребята, могли мне помочь.

Answer 1

Вы столкнулись с одной из этих двух проблем.

1. Ошибка сообщает о 404, поэтому в Синатре вы не создали маршрут (контроллер), который принимает метод OPTIONS для этого URL-адреса, ошибка 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. Это не проблема безопасности, потому что вы определяете, какое происхождение разрешено запрашивать API в порядке CORS.

2. Ваша проблема, скорее всего, первая из упомянутых, но вы также столкнетесь с этим позже.

В мире CORS для некоторых действий HTTP происхождение (Access-Control-Allow-Origin) не может быть установлен на любой хост (*).

Вы можете решить эту проблему, указав правильное происхождение следующим образом:

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

Обычно вы хотите позвонить своему API различного происхождения, потому что у вас есть различные среды (Dev, тест, этап, производство). Чтобы архивировать это, вам нужен бит-код, который устанавливает разрешенное происхождение в запрашиваемую среду. BUT WATCH OUT, не делайте то, что позволяет все!

Возможный путь: разрешенные корни, определенные вручную в конфигурации вашего приложения. Когда приходит запрос CORS, проверьте фильтр before, если запрос отправлен из одного источника, которому вы доверяете, и установите это на лету как Access-Control-Allow-Origin.