Menu
I'm developing a Rails API, and a separate html5 application. They do not share the same domain. How do I set up my Rails application to accept cross-domain requests? I have added the following to the top of my ApplicationController, but without any luck -
before_filter :set_access_control_headers
def set_access_control_headers
headers['Access-Control-Allow-Origin'] = 'http://myfrontend.com:3002'
headers['Access-Control-Request-Method'] = 'GET, OPTIONS, HEAD'
headers['Access-Control-Allow-Headers'] = 'x-requested-with,Content-Type, Authorization'
end
My javascript on my other app looks as follows -
var req = $.ajax({
url: url,
type: "GET",
crossDomain: true,
success: function(data, textStatus, jqXHR)
{
alert('success');
},
error: function(jqXHR, textStatus, errorThrown)
{
alert('error');
}
});
When I run this request, I get the following in my server log -
Started OPTIONS "/api/search?location_uuid=22222222222222222" for 127.0.0.1 at 2013-07-15 16:49:56 -0400
Processing by Api::V1::SearchController#index as JSON
Parameters: {"location_uuid"=>"22222222222222222"}
WARNING: Can't verify CSRF token authenticity
User Load (20.5ms) SELECT "users".* FROM "users" ORDER BY name DESC LIMIT 30 OFFSET 0
(63.1ms) SELECT COUNT(*) FROM "users"
Completed 204 No Content in 300ms (ActiveRecord: 0.0ms)
Anyone have any tips in getting this to work correctly?
882
Using rack-cors You need to inform Rails which origin it should allow. To do that, you need to create a new initializer for your application. This configuration will only allow HTTP POST calls to /order endpoint and all HTTP methods to any other endpoint. You need to pay close attention to the origins parameter.
Fixing the “CORS” errorAdd the rack-cors gem to Gemfile and bundle install . Then open the file at config/initializers/cors. rb . You'll see that it's completely commented out at first.
Rack::Cors provides support for Cross-Origin Resource Sharing (CORS) for Rack compatible web applications. The CORS spec allows web applications to make cross domain AJAX calls without using workarounds such as JSONP. See Cross-domain Ajax with Cross-Origin Resource Sharing.
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
It seems that adding the data-type as JSONP avoids the cross browser problems:
var req = $.ajax({
url: url,
type: "GET",
crossDomain: true,
dataType: "JSONP",
...
See this question for more info -
Can anyone explain what JSONP is, in layman terms?
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With