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.

Answer 1

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