AngularJS ne détecte pas l’en-tête Access-Control-Allow-Origin?

Je lance une application angular sur un virtualhost local ( http://foo.app:8000 ). Il fait une demande à un autre VirtualHost local ( http://bar.app:8000 ) en utilisant $http.post .

 $http.post('http://bar.app:8000/mobile/reply', reply, {withCredentials: true}); 

Dans l’onglet Réseau des outils de développement Chrome I, bien sûr, la requête OPTIONS apparaît et la réponse inclut l’en-tête:

 Access-Control-Allow-Origin: http://foo.app:8000 

Toutefois, la demande POST est annulée avec l’erreur suivante:

Aucun en-tête “Access-Control-Allow-Origin” n’est présent sur la ressource demandée. Origine ‘ http://foo.app:8000 ‘ n’est donc pas autorisé à accéder.

Quelqu’un a-t-il vécu cela? L’en Access-Control-Allow-Origin tête Access-Control-Allow-Origin est très clairement inclus dans la réponse à la requête OPTIONS. Je ne peux donc pas comprendre pourquoi le POST agit, l’en-tête manquait.

Access-Control-Allow-Credentials est également défini sur true .

C’est un bug dans le chrome pour le développement local. Essayez un autre navigateur. Alors ça va marcher.

Il existe une solution de contournement pour ceux qui souhaitent utiliser Chrome. Cette extension vous permet de demander n’importe quel site avec AJAX depuis n’importe quelle source, car il ajoute 'Access-Control-Allow-Origin: *' tête 'Access-Control-Allow-Origin: *' à la réponse.

Vous pouvez également append cet argument à votre lanceur Chrome: --disable-web-security . Notez que je l’utilise uniquement à des fins de développement, pas pour la “navigation Web” normale. Pour référence, voir Run Chromium with Flags .

Pour terminer, en installant l’extension mentionnée au premier paragraphe, vous pouvez facilement activer / désactiver CORS.

J’envoyais des requêtes d’angularjs en utilisant le service $ http pour biberonner sur http://localhost:8090/ et je devais appliquer CORS sinon j’ai reçu des erreurs de requête comme “Aucun en-tête” Access-Control-Allow-Origin “n’est présent sur le ressource demandée ”

 from bottle import hook, route, run, request, abort, response #https://github.com/defnull/bottle/blob/master/docs/recipes.rst#using-the-hooks-plugin @hook('after_request') def enable_cors(): response.headers['Access-Control-Allow-Origin'] = '*' response.headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT' response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept' 

J’ai vécu exactement le même problème. Pour moi, la demande OPTIONS est transmise, mais la requête POST dirait “abandonné”. Cela m’a amené à croire que le navigateur ne faisait jamais la demande POST. Chrome a dit quelque chose comme “Attention, les en-têtes provisoires sont affichés” dans les en-têtes de requête, mais aucun en-tête de réponse n’a été affiché. À la fin, je me suis tourné vers le débogage sur Firefox, ce qui m’a amené à découvrir que mon serveur répondait par une erreur et qu’aucun en-tête CORS n’était présent sur la réponse. Chrome recevait effectivement la réponse, mais ne permettait pas d’afficher la réponse dans la vue réseau.

CROS doit être résolu côté serveur.

Créer des filtres selon les besoins pour autoriser l’access et append des filtres dans web.xml

Exemple utilisant un ressort:

Classe de filtre:

 @Component public class SimpleFilter implements Filter { @Override public void init(FilterConfig arg0) throws ServletException {} @Override public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException { HttpServletResponse response=(HttpServletResponse) resp; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); chain.doFilter(req, resp); } @Override public void destroy() {} } 

Web.xml:

  simpleCORSFilter  com.abc.web.controller.general.SimpleFilter    simpleCORSFilter /*  

Je viens de rencontrer ce problème aujourd’hui. Il s’est avéré qu’un bogue sur le serveur (exception de pointeur nul) entraînait l’échec de la création d’une réponse, mais générait quand même un code d’état HTTP de 200. En raison du code d’état 200, Chrome attendait une réponse valide. La première chose que Chrome a faite a été de rechercher l’en-tête “Access-Control-Allow-Origin”, qu’il n’a pas trouvé. Chrome a alors annulé la demande et Angular m’a donné une erreur. Le bogue lors du traitement de la requête POST est la raison pour laquelle les OPTIONS réussiraient, mais le POST échouerait.

En bref, si vous voyez cette erreur, il se peut que votre serveur n’ait renvoyé aucun en-tête en réponse à la requête POST.

Cela peut également arriver lorsque vos parameters sont incorrects dans la requête. Dans mon cas, je travaillais avec une API qui m’a envoyé le message

“Aucun en-tête” Access-Control-Allow-Origin “n’est présent sur la ressource demandée. L’origine” null “n’est donc pas autorisée. La réponse a le code d’état HTTP 401.”

lorsque j’envoie un nom d’utilisateur ou un mot de passe incorrect avec la demande POST pour vous connecter.

Au lieu d’utiliser $ http.get (‘abc / xyz / getSomething’), essayez d’utiliser $ http.jsonp (‘abc / xyz / getSomething’)

  return{ getList:function(){ return $http.jsonp('http://localhost:8080/getNames'); } } 

Si vous rencontrez ce problème dans sails.js, configurez simplement votre cors.js pour inclure l’autorisation comme en-tête autorisé.

 /*************************************************************************** * * * Which headers should be allowed for CORS requests? This is only used in * * response to preflight requests. * * * ***************************************************************************/ headers: 'Authorization' // this line here