Rails POST with cross-domain XMLHttpRequest

Question

I've got a Rails v4.0.2 application setup and hosted on Heroku. I've temporarily disabled the CSRF Authenticity Token checking to allow POST of JSON data from an outside source. When I do a POST using the Advanced REST Client extension in Chrome, it works fine and creates the new record. However, when trying to create the exact same POST in JavaScript with an ajax call, I'm receiving the following errors:

OPTIONS http://herokudomain.com/users.json 404 (Not Found)

OPTIONS http://herokudomain.com/users.json No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://requestdomain.com' is therefore not allowed access.

XMLHttpRequest cannot load http://herokudomain.com/users.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://requestdomain.com' is therefore not allowed access.

I particularly don't understand the 404 error, as I'm certainly using the right URL, though I've changed it here for demonstration purposes. If I copy the URL from the error message and past into my browser, I'm taken to the desired page, not a 404.

Can someone please help enlighten me on what the difference is in using the Advanced REST Client and using an XMLHttpRequest in JavaScript, and how I can work around this issue?

EDITS:

Here is the code for my test page, which I've tried running via localhost and on a hosted domain: http://pastebin.com/z3hJEX8c

Answer 1

add these lines in your application controller it will allow cross domain requests but for security you can define your domain

before_filter :allow_ajax_request_from_other_domains

 def allow_ajax_request_from_other_domains
   headers['Access-Control-Allow-Origin'] = '*'
   headers['Access-Control-Request-Method'] = '*'
   headers['Access-Control-Allow-Headers'] = '*'
 end