Có vấn đề với Access-Control-Allow-Origin

Question

Tôi có một ứng dụng Rails đang chạy trong Heroku và một tệp html sử dụng Jquery Mobile.

Ứng dụng Rails trả về dữ liệu JSON (sử dụng RABL), ứng dụng di động của tôi giả sử để nhận và hiển thị.

Đây là những gì tôi đang làm, tôi đang cung cấp nội dung phản hồi cho chế độ xem danh sách. Khá đơn giản. Nếu tôi sử dụng Chrome, bảng điều khiển hiển thị lỗi Không được phép xuất xứ null bởi Access-Control-Allow-Origin. NẾU tôi thử trên Firefox, không có lỗi trên bảng điều khiển, nhưng dữ liệu không được hiển thị, ngay cả khi trình kích hoạt cảnh báo.

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

Đây là những gì server trả lời:

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

Tôi đã đọc trên Access-Control-Allow-Origin trong một thời gian bây giờ, nhưng tôi không chắc chắn những gì tôi phải làm, sao tôi nên thay đổi thứ gì đó trong máy chủ của mình? Tôi đang thử tệp html này trên trình duyệt của mình, nhưng nó cũng không hoạt động trên điện thoại của tôi. Tôi đã đặt $.support.cors và $.mobile.allowCrossDomainPages = true; thành true khi mobileinit chạy.

Mọi thông tin về những việc cần làm tiếp theo sẽ được đánh giá cao.

EDIT: Nếu bạn đang làm việc với RABL, hãy nhớ đặt biến enable_json_callback thành true trong trình khởi tạo. Bạn phải kích hoạt điều này từ cả hai phía.

Answer 1

Máy chủ phản hồi hoàn toàn tốt, nhưng chính trình duyệt thực hiện việc kiểm tra này. Để cho phép yêu cầu JSON của bạn, bạn phải đặt tiêu đề truy cập trong khi gửi phản hồi như trong một 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 

Ở đây * cho phép tất cả các miền. Điều này sẽ được thay đổi để phù hợp với tên miền của bạn. ví dụ .:

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

Answer 2

Trong Rails 4 lệnh after_filter đã được thay đổi để after_action để mã thành ở phía trên cùng của bộ điều khiển nên là:

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