遇到Access-Control-Allow-Origin问题

Question

我有一个在Heroku中运行的Rails应用程序,以及一个使用Jquery Mobile的html文件.

Rails应用程序返回JSON数据(使用RABL),我的移动应用程序可以选择并显示.

这就是我正在做的事情,我正在将回复的内容提供给列表视图.很简单.如果我使用Chrome,则控制台会显示错误:Access-Control-Allow-Origin不允许使用Origin null.如果我尝试Firefox,控制台上没有错误,但数据也没有显示,甚至没有显示警报触发器.

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");
}

这是服务器响应的内容:

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

我已经阅读了Access-Control-Allow-Origin一段时间了,但是我不确定我该做什么,我应该更改服务器中的内容吗？我正在我的浏览器上尝试这个html文件,但它也无法在我的手机上运行.跑步时我已经设定$.support.cors并且$.mobile.allowCrossDomainPages = true;为真mobileinit.

任何有关下一步该怎么做的信息都将不胜感激.

编辑:如果您正在使用RABL,请记住在初始化程序中将变量enable_json_callback设置为true.你必须从双方都启用这个东西.

Answer 1

在Rails 4中,命令after_filter已更改为,after_action因此控制器顶部的完成代码应为:

 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

Answer 2

服务器响应完全正常,但是进行此检查的是浏览器.要允许您的JSON请求,您必须在发送响应时设置访问标头,如同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

这里*允许所有域名.这应该更改为与您的域匹配.例如:

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