IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

Deux requêtes au lieu d'une lors d'un POST


Sujet :

AngularJS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    179
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 179
    Par défaut Deux requêtes au lieu d'une lors d'un POST
    Bonjour,
    Lorsque je lance un POST à partir d'une appli AngularJs, j'ai constaté qu'il y avait deux aller-retours, un pour les OPTIONS et un pour le POST lui-même. Le problème outre qu'il y a deux REQUEST/RESPONSE au lieu d'une, c'est que dans le premier le contenu est vide, du coup j'ai été obligé côté serveur de tester si le json était non null avant de faire l'update.
    Ma question : est-ce qu'il est possible d'éviter le premier envoi, celui des OPTIONS et si oui, comment ?
    Précision : en recherchant un peu sur internet, j'ai vu que ce problème était récurant, mais que les solutions proposées étaient aléatoires, pire il semblerait que cela soit consubstantiel au dialogue POST via jQuery ou AngularJs !
    Merci pour votre aide

    Voici les différents éléments :
    Le code AngularJs :
    Le service :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function updateEmployee(employee) {
        var url = Config.urlServer + Config.urlUpdateEmployee; 
        $http.post(url, employee);
    };
    Le contrôleur
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $scope.validateEmployee = function (id) {
        var name = $scope.employee.name;
        var job = $scope.employee.job;
        var hiredate = $scope.employee.hiredate;
        var salary = $scope.employee.salary;
        var department_id = $scope.selectedOption.department_id;
        if (id) {
            var employee = {employee_id: id, name: name, job: job, hiredate: hiredate, salary: salary, department_id: department_id};
            EmployeesRest.updateEmployee(employee);
        }
        else {
            var employee = {name: name, job: job, hiredate: hiredate, salary: salary, department_id: department_id};
            EmployeesRest.addEmployee(employee);
        }
        $location.path('/home');
    };
    Code côté serveur Rest :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if ($employeeJson != null) {
        $employee_id = $employeeJson->employee_id;
        $name = $employeeJson->name;
        $job = $employeeJson->job;
        $hiredate = $employeeJson->hiredate;
        $salary = $employeeJson->salary;
        $department_id = $employeeJson->department_id;
        . . .
    }
    Les trames :
    Nom : Trames1.JPG
Affichages : 410
Taille : 14,1 Ko
    Détail :
    Client AngularJs
    OPTIONS updateEmployee
    Request
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    Accept	
    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Encoding	
    gzip, deflate
    Accept-Language	
    fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
    Access-Control-Request-He...	
    content-type
    Access-Control-Request-Me...	
    POST
    Cache-Control	
    no-cache
    Connection	
    keep-alive
    Host	
    localhost
    Origin	
    http://localhost:8383
    Pragma	
    no-cache
    User-Agent	
    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
    Response
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    Access-Control-Allow-Head...	
    content-type
    Access-Control-Allow-Meth...	
    GET, POST, OPTIONS
    Access-Control-Allow-Orig...	
    *
    Connection	
    Keep-Alive
    Content-Length	
    1
    Content-Type	
    text/html; charset=UTF-8
    Date	
    Wed, 16 Sep 2015 06:52:22 GMT
    Keep-Alive	
    timeout=5, max=100
    Server	
    Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3
    X-Powered-By	
    PHP/5.6.3
    POST updateEmployee
    Request
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    Accept	
    application/json, text/plain, */*
    Accept-Encoding	
    gzip, deflate
    Accept-Language	
    fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
    Cache-Control	
    no-cache
    Connection	
    keep-alive
    Content-Length	
    119
    Content-Type	
    application/json;charset=utf-8
    Host	
    localhost
    Origin	
    http://localhost:8383
    Pragma	
    no-cache
    Referer	
    http://localhost:8383/Employees/index.html
    User-Agent	
    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
    POST
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    {"employee_id":"1","name":"KING Alex","job":"President","hiredate":"1981-11-17","salary":"5000.00","department_id"
    :"1"}
    Response
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    Access-Control-Allow-Head...	
    content-type
    Access-Control-Allow-Meth...	
    GET, POST, OPTIONS
    Access-Control-Allow-Orig...	
    *
    Connection	
    Keep-Alive
    Content-Length	
    1
    Content-Type	
    text/html; charset=UTF-8
    Date	
    Wed, 16 Sep 2015 06:52:22 GMT
    Keep-Alive	
    timeout=5, max=99
    Server	
    Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3
    X-Powered-By	
    PHP/5.6.3

  2. #2
    Membre éclairé Avatar de Diablo_22
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2005
    Messages
    498
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Février 2005
    Messages : 498
    Par défaut
    Bonjour,

    Ce problème peut également être provoqué en ayant un ng-app avec routage vers son contrôleur et une référence ng-controller dans ta page . Par exemple , si ton application ressemble à :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <html lang="en" ng-app="myApp">
    <head>...</head>
    <body>
    <div ng-controller="myController">
    ...
    </div>
    </body>
    </html>

    Javascript définissant l' application:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    angular.module('myApp',[]) {
    $routeProvider.when('/path', {templateUrl: '...', controller: myController);
    Dans le cas ci-dessus , avec le routage défini à myController , le contrôleur sera instancié deux fois et on verra deux appels comme décrit .

  3. #3
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    @clem_alain

    Ma question : est-ce qu'il est possible d'éviter le premier envoi, celui des OPTIONS et si oui, comment ?
    Oui c'est possible mais il ne faut pas. L'envoi de la requête OPTIONS est effectué par le navigateur qui fait ça tout seul comme un grand.

    C'est l'implémentation du mécanisme de sécurité CORS.

    Précision : en recherchant un peu sur internet, j'ai vu que ce problème était récurant, mais que les solutions proposées étaient aléatoires, pire il semblerait que cela soit consubstantiel au dialogue POST via jQuery ou AngularJs !
    En effet les réponses peuvent être aléatoires, tout le monde ne fait malheureusement pas l'effort d'aller au fond des choses. Cela n'a pas de rapport direct avec le fait d'utiliser jQuery ou AngularJs, cela a trait à l'architecture. Le cas classique en Angular en mode SPA c'est d'avoir le client hébergé sur un serveur qui va consommer différents webservices situés sur différents serveurs.

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    179
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 179
    Par défaut
    Citation Envoyé par Diablo_22 Voir le message
    ...
    Merci d'avoir répondu, mais en l'occurrence, ce n'est pas le cas, le contrôleur n'est référencé que dans le routeur.

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    179
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 179
    Par défaut
    Bonjour,
    Merci pour cette réponse rapide, cela va m'éviter de m'épuiser à chercher à résoudre un "problème" qui n'en est finalement pas un !
    Je comprends maintenant (c'est évidemment ironique) pourquoi la mise à jour des données est assez rarement mentionnée dans les "tutos" rencontrés sur le net.
    Une chose cependant m'intrigue, pourquoi ce double flux n'est pas présent lors d'un GET ?

  6. #6
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Je te propose de lire la documentation associée

    EDIT : J'ai mis le smiley parce que c'est un sujet assez galère à appréhender donc en gros bon courage
    En gros GET = requête simple
    Ton POST = requête preflight (c'est à dire d'abord une requête OPTIONS).

    C'est la norme qui est comme ça. Bon courage avec la doc.

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    179
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 179
    Par défaut
    Merci pour le lien, cela semble très intéressant et en plus en patois local (français) ce qui est appréciable ;-)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 15/03/2010, 12h44
  2. Page de garde s'affiche sur deux pages au lieu d'une
    Par MPEG4 dans le forum Mise en forme
    Réponses: 8
    Dernier message: 04/03/2009, 19h35
  3. [MySQL] 2 requêtes au lieu d'une
    Par stars333 dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 24/08/2007, 14h07
  4. une requête au lieu de deux ?
    Par Invité dans le forum Requêtes
    Réponses: 4
    Dernier message: 30/11/2005, 12h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo