AngularJS ne détecte pas de Access-Control-Allow-Origin-tête?

Je suis en cours d'exécution angulaire application locale virtualhost (http://foo.app:8000). C'est en faisant une demande à un autre VirtualHost (http://bar.app:8000) à l'aide de $http.post.

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

Dans l'onglet Réseau des Outils de développement Chrome j'ai bien sûr voir les OPTIONS de demande, et la réponse inclut l'en-tête:

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

Cependant, le POSTE demande est annulée avec l'erreur suivante:

Pas de "Access-Control-Allow-Origin' en-tête est présent sur la ressource demandée. Origine " http://foo.app:8000 ' est donc pas autorisé à accéder.

Quelqu'un a vécu cette situation? Le Access-Control-Allow-Origin en-tête est clairement inclus dans la réponse à la demande d'OPTIONS, donc je ne peux pas pour la vie de me comprendre pourquoi la POSTE est en intérim de l'en-tête manquait.

Access-Control-Allow-Credentials est également mis à true.

  • voyez-vous Access-Control-Allow-Méthodes d'en-tête sur les OPTIONS de réponse?
  • En effet. En permettant à toutes les méthodes.
InformationsquelleAutor TaylorOtwell | 2014-01-13
  1. 46

    C'est un bug dans chrome locales pour les dev. Essayez de navigateur et d'autres. Puis il va travailler.

    • Je vous remercie. Fonctionne très bien sous Firefox. Avez-vous plus d'informations sur ce bug?
    • Pas vraiment un bug, mais plus quelque chose pour des raisons de sécurité. Voir: stackoverflow.com/questions/3102819/...
    • J'ai essayé dans d'autres navigateur et il a travaillé @_@ Pourquoi chrome donc dire 🙁
    • Ce que vous êtes censé faire quand vous êtes prêt à déployer l'application pour un plus grand public à utiliser, la plupart des gens utilisent google Chrome, quelle est la bonne façon de traiter ce problème?
    • Ce n'est pas une solution quand même!!!! Cela a à voir avec la SCRO et pas seulement les navigateurs... Ses une contrainte de sécurité. Vous pouvez toujours activer la SCRO sur votre serveur.
    InformationsquelleAutor user1469734
  2. 26

    Il y a une solution pour ceux qui veulent utiliser google Chrome. Cette extension vous permet de demander à n'importe quel site avec AJAX à partir de n'importe quelle source, car elle ajoute 'Access-Control-Allow-Origin: *' en-tête de la réponse.

    Comme alternative, vous pouvez ajouter cet argument à votre lanceur d'applications google Chrome: --disable-web-security. Notez que j'avais seulement l'utiliser pour des fins de développement, pas normal de "surfer sur le web". Pour référence, voir Exécuter Chrome avec des Drapeaux.

    Comme note finale, par l'installation de l'extension mentionnée sur le premier paragraphe, vous pouvez facilement activer/désactiver la SCRO.

    • L'extension fonctionne comme un charme!
    • Un bonus supplémentaire est que ce plugin très utile aussi pour arriver à arrêter le Facebook de travail donc, si votre logiciel de développement de flux de travail ressemble à la mienne, vous aurez probablement finir le reste de ce que vous travailliez dans un temps record.
    • C'est vrai, @ChrisRae.
    • Cette extension semble être d'éliminer l'erreur. Cependant, quand j'ai vérifié l'en-tête de demande il ajoute Origine: evil.com. Je ne sais pas si c'est nocif ou non significatif.
    • semble que cette extension ne fonctionne pas pour le POST
    InformationsquelleAutor Rui Afonso Pereira
  3. 7

    J'ai été l'envoi des demandes de angularjs à l'aide de $service http pour bouteille en cours d'exécution sur http://localhost:8090/ et j'ai du mettre De la SCRO sinon je me suis demande des erreurs du type "Non" Access-Control-Allow-Origin' en-tête est présent sur la 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'
    InformationsquelleAutor Gabriel
  4. 3

    Je l'ai vécu exactement la même question. Pour moi, les OPTIONS de demande, mais la demande POST dirais "avorté." Cela m'a amené à croire que le navigateur n'a jamais été en faisant de la POSTE demande à tous les. Chrome a dit quelque chose comme "Attention provisoire en-têtes sont indiqués" dans les en-têtes de requête, mais pas d'en-têtes de réponse ont été présentés. En fin de compte je me suis tourné vers le débogage sur Firefox qui m'a conduit à découvrir mon serveur répond avec un message d'erreur et pas de la SCRO en-têtes ont été présents sur la réponse. Chrome était en fait la réception de la réponse, mais qui ne permettent pas la réponse à afficher dans la vue du réseau.

    • Merci tu m'as eu sur mon chemin pour réparer ma propre question. J'ai eu les mêmes symptômes. Dans mon cas, j'ai été en utilisant Amazon passerelle API et de l'appeler à partir AngularJS à partir de l'intérieur de Chrome. J'ai été un paramètre absent, de même que @tacticurv suggère mais Chrome a été ce qui implique qu'il n'avait jamais eu le POSTE en raison de la SCRO lorsque la demande d'OPTIONS clairement réussi. Le supplément de gotcha j'ai trouvé était que la passerelle API est utile "activer la SCRO" bouton ne fait pas un travail complet. Il ne fait qu'ajouter des en-têtes de à la 200 OK réponses et a raté de 400 et 500 réponses d'erreur. Ces erreurs ont ensuite manqué de l'inspecteur de chrome!
    • En fait depuis que j'ai posté cette réponse, j'ai été en utilisant chrome://net-internals/#events pour détecter les erreurs de ce type au lieu d'utiliser Firefox. Juste bon à savoir dans l'avenir. J'ai fait envoyer un bug de Chrome et il a été corrigé depuis un moment, mais je pense qu'on est revenu il. code.google.com/p/chromium/issues/detail?id=343707
    InformationsquelleAutor brain_bacon
  5. 3

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

    Créer des Filtres selon l'exigence de permettre l'accès et l'ajout de filtres dans web.xml

    Exemple à l'aide de printemps:

    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:

    <filter>
    <filter-name>simpleCORSFilter</filter-name>
    <filter-class>
        com.abc.web.controller.general.SimpleFilter
    </filter-class>
</filter>
<filter-mapping>
    <filter-name>simpleCORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
    InformationsquelleAutor nkharche
  6. 2

    Je viens de tomber sur ce problème aujourd'hui. Il s'est avéré qu'un bug sur le serveur (à l'exception de pointeur null) était la cause de son échec dans la création d'une réponse, mais encore, il a généré un code d'état HTTP 200. Parce que le code d'état 200, Chrome attend une réponse valide. La première chose que Chrome n'a été que de chercher le "Access-Control-Allow-Origin' en-tête, qui n'était pas le trouver. Chrome puis annulé à la demande, et Angulaires m'a donné une erreur. Le bug lors du traitement de la requête POST est la raison pour laquelle les OPTIONS de réussir, mais le POSTE serait un échec.

    En bref, si vous voyez ce message d'erreur, il se peut que votre serveur n'a pas renvoyé de tous les en-têtes à tous, en réponse à la requête POST.

    • C'était essentiellement le problème que j'ai - merci pour le heads up.
    InformationsquelleAutor David Hansen
  7. 2

    Il peut également se produire lorsque vos paramètres sont mal dans la demande. Dans mon cas, je travaille avec une API qui m'a envoyé le message

    "Non" Access-Control-Allow-Origin' en-tête est présent sur la ressource demandée. Origine 'null' est donc pas autorisé à accéder. La réponse avait le code d'état HTTP 401."

    quand j'ai envoyé un mauvais nom d'utilisateur ou mot de passe avec le POST de demande de connexion.

    InformationsquelleAutor tacticurv
  8. 2

    Au lieu d'utiliser $http.obtenir('abc/xyz/getSomething') essayez d'utiliser
    $http.jsonp('abc/xyz/getSomething')

         return{
            getList:function(){
                return $http.jsonp('http://localhost:8080/getNames');
            }
        }
    InformationsquelleAutor Indranil Acharya
  9. 0

    Les gars si vous rencontrez ce problème dans sails.js il suffit de régler votre cors.js pour inclure l'Autorisation, le permis de l'en-tête

    JS:

    /***************************************************************************
  *                                                                          *
  * Which headers should be allowed for CORS requests? This is only used in  *
  * response to preflight requests.                                          *
  *                                                                          *
  ***************************************************************************/

  headers: 'Authorization' //this line here

    InformationsquelleAutor Umar Rasydan