No 'Access-Control-Allow-Origin' header is

问题:

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

回答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!

回答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?

回答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.

回答4:

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

回答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.

回答6:

In your ApplicationController.rb add

  def set_access_control_headers
    headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
  end

回答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';

回答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.