17

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

harshit
  • 7,925
  • 23
  • 70
  • 97
  • I'm having the same issue with Emberjs and Google oauth. Haha pretty funny you're hitting this with Facebook/Angular and just submitted this question only 2 hours ago. – Gowiem Feb 11 '14 at 20:36
  • You are bumping into a same origin origin policy issue http://en.m.wikipedia.org/wiki/Same-origin_policy . This may not work on local host, or you may need to proxy through rails. (This is a tip not full answer) – AndrewD Feb 11 '14 at 23:09
  • Go to http://enable-cors.org/ and follow the steps for your server/app configuration – astroanu Jun 17 '15 at 06:16
  • This question has 12 upvotes while every answer has 0 except one with 1. Surely someone has figured this out? – Laser Aug 31 '15 at 08:27

8 Answers8

4

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!

miguelr
  • 1,334
  • 14
  • 21
  • Certainly, there are many other workaround for the problem. Other links posted here are very useful! – miguelr Aug 07 '15 at 09:46
  • I came ready to write this one answer, but since it's here, and since it's the best, it should be the accepted answer. – Victor Ivens Aug 17 '15 at 21:17
  • I'm getting an "access is denied" on the console when I write those two commands. Any ideas? – Ka Mok Jun 19 '16 at 01:02
  • Really confused, error went away after a bit of hiatus. Works with Chrome already open, so that wasn't the problem. No idea what fixed it. – Ka Mok Jun 19 '16 at 03:47
1

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?

Community
  • 1
  • 1
Nick Karpov
  • 500
  • 3
  • 5
0

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.

BWStearns
  • 2,567
  • 2
  • 19
  • 33
0

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

realwol
  • 1
0

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.

arghtype
  • 4,376
  • 11
  • 45
  • 60
rk1729
  • 11
  • 3
0

In your ApplicationController.rb add

  def set_access_control_headers
    headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
  end
josliber
  • 43,891
  • 12
  • 98
  • 133
chrichar
  • 11
  • 4
0

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';
Ajeet Lakhani
  • 3,768
  • 2
  • 22
  • 37
0

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.

radhika gavali
  • 1
  • 5