No 'Access-Control-Allow-Origin' header is present on the requested resource - ruby-on-rails

Question

I am using omniauth-facebook with AngularJS and CORS is not working correctly .
My omniauth.rb is
Rails.application.config.middleware.use OmniAuth::Builder do
provider :facebook,"xxxxx", "xxxxx",
:scope => 'email,user_birthday,read_stream', :display => 'popup'
end
Everything works if i use it as rails app and request. But when i try to call 'http:\localhost:3000\users\auth\facebook" via Angular JS
$http.get('/users/auth/facebook').success(function(data, status, headers, config) {
console.log("back in success");
}).
error(function(data, status, headers, config) {
});
}
i see following error in JS console
XMLHttpRequest cannot load
https://www.facebook.com/dialog/oauth?client_id=xxxx&display=popup…thday%2Cread_stream&state=3352c1924bdbc9277f7b1070c38d67acf79b529f198323cb.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access.
(The url is not displayed completely in console)
I added following line
config.middleware.insert_before Warden::Manager, Rack::Cors
but also this didn't work .
What is the best way or how can i override headers for OmniAuth ?
I am using Angularjs and gem devise ,omniauth-facebook

Answer 1

Since you are on your development environment you may want to try a workaround, by allowing you browser to run in a non-secure mode.
For Chrome on Windows, from CMD try:
> cd C:\Program Files (x86)\Google\Chrome\Application
> chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
The --disable-web-security flag will allow you to make cross domain requests. The --user-data-dir flag will allow you to open a new session only for development.
This is just a workaround for you development work! Don't use this in production or navigate to other sites in this session!

Answer 2

The issue is Javascript cannot make cross-domain requests. This is done for security reasons so that a script cannot call a remote server and expose sensitive data.
Below is a link to a very good and simple explanation with a few options on how to get around it:
http://developer.yahoo.com/javascript/howto-proxy.html
And here is a previous answer which has some good information as well:
Why am I seeing an "origin is not allowed by Access-Control-Allow-Origin" error here?

Answer 3

If they don't have the header set then you can't force them to have the headers. Perhaps you should look at using JSONP. However, mirroring through the server wouldn't be all that bad since you'll only have to deal with it at most once per visit, and more than likely once per user since so few people ever delete cookies.

Answer 4

Set 'Access-Control-Allow-Origin' in server will make the track.
Like:
ruby
headers['Access-Control-Allow-Origin'] = '*'
In rails.

Answer 5

The problem is you are getting the data from the https secure site that is facebook to your site which is http so the latest browsers are not supporting cross allow origin.
The only solution is make your site support https.

Answer 6

In your ApplicationController.rb add
def set_access_control_headers
headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
end

Answer 7

For CORS you have to whitelist the domain you want to access from cross origin request on the server side
headers['Access-Control-Allow-Origin'] = '*'
//star will allow all the domain you can specify also which url u want to access
on the client side,you have to set the header in config() as
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Answer 8

some times that problem occurs because of browser.IE by default allow cross origin request. In chrome you will required to add one plugin that is "Allow-Control-Allow-Origin: *"and enabled it.