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

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?