2013-09-22 21 views
5

Mam aplikację Rails działającą w Heroku i plik HTML za pomocą Jquery Mobile.Problemy z aplikacją Access-Control-Allow-Origin

Aplikacja Rails zwraca dane JSON (przy użyciu RABL), które moja aplikacja mobilna ma odebrać i wyświetlić.

To właśnie robię, karmię zawartość odpowiedzi do listy. Dość proste. Jeśli używam Chrome, konsola pokazuje błąd Origin null jest niedozwolone przez Access-Control-Allow-Origin. JEŚLI próbuję na Firefoxie, nie ma błędu na konsoli, ale dane nie są pokazywane, nawet wyzwalacze alertów.

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

To co serwer odpowiada:

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

mam czytania na Access-Control-Allow-Origin na chwilę teraz, ale nie jestem pewien, co muszę zrobić, czy powinienem coś zmienić na moim serwerze? Próbuję tego pliku HTML w mojej przeglądarce, ale nie działa też na moim telefonie. Ustawiłem $.support.cors i $.mobile.allowCrossDomainPages = true; na true, gdy uruchomiono mobileinit.

Wszelkie informacje na temat tego, co dalej należy zrobić, byłyby bardzo mile widziane.

EDIT: Jeśli pracujesz z RABL, pamiętaj, aby ustawić zmienną enable_json_callback na true w inicjalizatorze. Musisz włączyć tę rzecz z obu stron.

Odpowiedz

12

Serwer odpowiada idealnie dobrze, ale to przeglądarka wykonuje tę kontrolę. Aby zezwolić na żądanie JSON, musisz ustawić nagłówki dostępu podczas wysyłania odpowiedzi, tak jak w przypadku 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 

Tutaj * zezwala na wszystkie domeny. To powinno zostać zmienione, aby pasowało do Twojej domeny. np .:

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

Dzięki za odpowiedź. Gdzie powinienem nazwać tę funkcję? – Sebastialonso

+0

Powinien to być 'after_filter' do działania, które wywołujesz w wywołaniu ajax. Jeśli istnieje kilka wywołań ajax do aplikacji rails, to może to być użyte jako 'after_filter' w' control_controller'. – Nerve

+0

Sposoby ustawiania tego na podstawie środowiska można znaleźć na stronie https://stackoverflow.com/a/17815546/912563 – lightswitch05

18

W Rails 4 Komenda after_filter została zmieniona na after_action więc gotowy kod w górnej części kontrolera powinno być:

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