Having issues with Access-Control-Allow-Origin

Question

I have a Rails app running in Heroku, and a html file using Jquery Mobile.

The Rails app returns JSON data (using RABL), that my mobile app is suppose to pick up and show.

This is what I'm doing, I'm feeding the contents of the response to a listview. Pretty simple. If I use Chrome, the console shows the error Origin null is not allowed by Access-Control-Allow-Origin. IF I try on Firefox, there's no error on the console, but the data is not shown either, not even the alert triggers.

function getBuses(){
  $('#content').append("<ul id='bus_list' data-role='listview' data-inset='true'</ul>")
  $('#content').trigger("create");
  //Se llama a la API para retornar todos los buses
  $.getJSON('http://someapp.herokuapp.com/buses.json', function(data)
  {
    $.each(data, function(key, value)
      { 
        alert(key + ":" + value);
        $('#bus_list').append('<li id="'+bus.id+'">'+bus.numero_de_linea+'<li/>');
      });
    });
  $('#bus_list').listview("refresh");
}

This is what the server responds:

[{"id":7,"numero_de_linea":"604"}]

I've reading on Access-Control-Allow-Origin for a while now, but I'm not sure what I have to do, should I change something in my server? I'm trying this html file on my browser, but it's not working on my phone either. I have set $.support.cors and $.mobile.allowCrossDomainPages = true; to true when mobileinit runs.

Any information on what to do next, would be greatly appreciated.

EDIT: If you are working with RABL, remember to set the variable enable_json_callback to true in the initializer. You have to enable this thing from both sides.

Abelmosk

Answer 1

The server responds perfectly fine, but it is the browser that does this check. To allow your JSON request, you must set the access headers while sending the response like in an after_filter.

# This is used to allow the cross origin POST requests made by confroom kiosk app.
  def set_access_control_headers
    headers['Access-Control-Allow-Origin'] = "*"
    headers['Access-Control-Request-Method'] = %w{GET POST OPTIONS}.join(",")
  end

Here * permits all domains. This should be changed to match your domain. e.g.:

headers['Access-Control-Allow-Origin'] = "http://localhost:3000"

Matchless

Thanks for responding. Where should I call this function? – Abelmosk

It should be an after_filter to the action which you are invoking in your ajax call. If there are several ajax calls to the rails app, then this can be used as an after_filter in application_controller. – Matchless

For ways to set this based on the environment, see https://mcmap.net/q/433302/-how-to-set-access-control-allow-origin-in-webrick-under-rails – Transience

Answer 2

In Rails 4 the command after_filter has been changed to after_action so the finished code in the top of the controller should be:

 after_action :set_access_control_headers

 def set_access_control_headers
   headers['Access-Control-Allow-Origin'] = "*"
   headers['Access-Control-Request-Method'] = %w{GET POST OPTIONS}.join(",")
 end

Heartbreaking