Discussion :

[clem_alain]

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 :

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

[Diablo_22]

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 .

[Marco46]

@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.

[clem_alain]

...

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.

[clem_alain]

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 ?

[Marco46]

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.

[clem_alain]

Merci pour le lien, cela semble très intéressant et en plus en patois local (français) ce qui est appréciable ;-)