Question

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

Rails应用程序返回JSON数据（使用RABL），我的移动应用程序可以选择并显示。

这就是我正在做的事情，我正在将回复的内容提供给列表视图。很简单。如果我使用Chrome，则控制台会显示错误 Access-Control-Allow-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设置为true。

非常感谢有关下一步该怎么做的任何信息。

编辑：如果您正在使用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"

遇到Access-Control-Allow-Origin问题

2 个答案: