2013-09-22 13 views
5

Ho un'app Rails in esecuzione in Heroku e un file html che utilizza Jquery Mobile.Problemi con Access-Control-Allow-Origin

L'app Rails restituisce i dati JSON (utilizzando RABL), che la mia app mobile è in grado di rilevare e mostrare.

Questo è quello che sto facendo, sto alimentando il contenuto della risposta ad un listview. Abbastanza semplice. Se utilizzo Chrome, la console mostra l'errore Origine null non consentita da Access-Control-Allow-Origin. Se provo Firefox, non ci sono errori sulla console, ma i dati non vengono mostrati, nemmeno i trigger di avviso.

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

Questo è ciò che il server risponde:

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

ho lettura su Access-Control-Allow-Origin per un po ', ma non sono sicuro di quello che devo fare, dovrei cambiare qualcosa nel mio server? Sto provando questo file html sul mio browser, ma non funziona nemmeno sul mio telefono. Ho impostato $.support.cors e $.mobile.allowCrossDomainPages = true; su true quando viene eseguito mobileinit.

Qualsiasi informazione su cosa fare dopo, sarebbe molto apprezzata.

EDIT: Se si sta lavorando con RABL, ricordarsi di impostare la variabile enable_json_callback su true nell'inizializzatore. Devi abilitare questa cosa da entrambi i lati.

risposta

12

Il server risponde perfettamente bene, ma è il browser che esegue questo controllo. Per consentire la tua richiesta JSON, devi impostare le intestazioni di accesso mentre invii la risposta come in un 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 

Qui * consente tutti i domini. Questo dovrebbe essere cambiato per corrispondere al tuo dominio. es .:

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

Grazie per la risposta. Dove dovrei chiamare questa funzione? – Sebastialonso

+0

Dovrebbe essere un 'after_filter' per l'azione che stai invocando nella tua chiamata ajax. Se ci sono diverse chiamate Ajax all'app rails, allora può essere usato come un 'after_filter' in' application_controller'. – Nerve

+0

Per informazioni su come impostarlo in base all'ambiente, consultare https://stackoverflow.com/a/17815546/912563 – lightswitch05

18

In Rails 4 il comando after_filter è stata cambiata in modo che il codice after_action finito nella parte superiore del regolatore deve essere:

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