web-dev-qa-db-fra.com

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée

J'utilise omniauth-facebook avec AngularJS et CORS ne fonctionne pas correctement.

Mon omniauth.rb est 

Rails.application.config.middleware.use OmniAuth::Builder do
provider :facebook,"xxxxx", "xxxxx",
:scope => 'email,user_birthday,read_stream', :display => 'popup'

end

Tout fonctionne si je l'utilise comme application Rails et demande. Mais quand j'essaie d'appeler '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) {

            });
    }

je vois l'erreur suivante dans la console JS

XMLHttpRequest ne peut pas charger https://www.facebook.com/dialog/oauth?client_id=xxxx&display=popup … thday% 2Cread_stream & state = 3352c1924bdbc9277f7b1070c38d67acf79b529f198323cb . Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur le .__ demandé. Ressource. Origine 'http://localhost:3000' n'est donc pas autorisé accès.

(L'URL ne s'affiche pas complètement dans la console)

J'ai ajouté la ligne suivante 

config.middleware.insert_before Warden::Manager, Rack::Cors

mais aussi cela n'a pas fonctionné.

Quelle est la meilleure façon ou comment puis-je remplacer les en-têtes pour OmniAuth? 

J'utilise Angularjs et un bijou, omniauth-facebook

ruby-on-railsangularjsruby-on-rails-3.2omniauth
16
harshit

Puisque vous êtes dans votre environnement de développement, vous pouvez essayer une solution de contournement en permettant à votre navigateur de s'exécuter en mode non sécurisé.

Pour Chrome sous Windows, à partir de CMD, essayez:

> cd C:\Program Files (x86)\Google\Chrome\Application
> chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Le drapeau --disable-web-security vous permettra de faire des requêtes entre domaines. Le drapeau --user-data-dir vous permettra d’ouvrir une nouvelle session seulement pour le développement.

Ceci est juste une solution de contournement pour votre travail de développement ! N'utilisez pas ceci en production et ne naviguez pas vers d'autres sites lors de cette session!

4
miguelr

Le problème est que Javascript ne peut pas faire de requêtes entre domaines. Ceci est fait pour des raisons de sécurité afin qu'un script ne puisse pas appeler un serveur distant et exposer des données sensibles.

Vous trouverez ci-dessous un lien vers une explication simple et efficace avec quelques options pour la contourner:

http://developer.yahoo.com/javascript/howto-proxy.html

Et voici une réponse précédente qui contient également de bonnes informations:

Pourquoi vois-je une erreur "L'origine n'est pas autorisée par Access-Control-Allow-Origin" ici?

1
Nick Karpov

S'ils ne disposent pas de l'en-tête, vous ne pouvez pas les forcer à les avoir. Peut-être devriez-vous envisager d’utiliser JSONP . Cependant, la mise en miroir sur le serveur ne serait pas si mauvaise puisque vous n’auriez qu’à la traiter au plus une fois par visite, et plus d’une fois par utilisateur, étant donné que très peu de personnes supprimaient les cookies.

0
BWStearns

Le problème est que vous obtenez les données du https site sécurisé qui est facebook sur votre site qui est http, de sorte que les navigateurs les plus récents ne prennent pas en charge cross allow Origin. 

La seule solution consiste à rendre votre site support https.

0
rk1729

Dans votre ApplicationController.rb, ajoutez

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

parfois, ce problème se produit à cause de browser.IE par défaut, autoriser les requêtes croisées. En chrome, vous devrez ajouter un plug-in "Allow-Control-Allow-Origin: *" et l'activer.

0
radhika gavali

Pour CORS, vous devez ajouter à la liste blanche le domaine auquel vous souhaitez accéder à partir d'une requête d'origine croisée côté serveur. 

    headers['Access-Control-Allow-Origin'] = '*'
//star will allow all the domain you can specify also which url u want to access

côté client, vous devez définir l’en-tête dans config () comme

   $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
   $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
0
Ajeet Lakhani

Définir 'Access-Control-Allow-Origin' sur le serveur créera la piste . Comme: Ruby headers['Access-Control-Allow-Origin'] = '*' In. Rails.

0
realwol