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
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!
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?
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.
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
.
Dans votre ApplicationController.rb, ajoutez
def set_access_control_headers
headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
end
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.
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';
Définir 'Access-Control-Allow-Origin' sur le serveur créera la piste . Comme: Ruby
headers['Access-Control-Allow-Origin'] = '*'
In. Rails.