CORS et les requêtes POST, avec Angular

Bonjour,

Je travaille toujours sur ma petite application Angular (v 1.4.9).

Le souci du jour : les requêtes vers un serveur extérieur (sur mon poste mais avec une URL différente) puisque j'ai le message :

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur  http://url-serv/.  Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

De plus, quand j'ajoute des données à passer au serveur, la méthode de la requête passe de POST à OPTIONS ... C'est lié ?

J'ai tenté d'ajouter le header correspondant dans la requête, sans succès ...

pc.controller('connexionCtrl', function ($scope, $http){
  // connexion
  $scope.connexionUtilisateur = function() {
    var id = $scope.utilisateur.id;
    var mdp = $scope.utilisateur.mdp;

    $http({
      method: 'POST',
      url: 'http://url-serv/',
      headers: {'Content-Type' : 'application/json', 'Access-Control-Allow-Origin' : 'http://url-serv/'}/*,
      data: { id : id, mdp : mdp }*/
    }).then(function successCallback(response) {
      console.log("succes" + response);
    }, function errorCallback(response) {
      console.log("erreur" + response);
    });
  }
});

Si vous avez une idée ...

PS : je bosse sous Firefox 52.0.2
Modifié par Gam (01 Apr 2017 - 17:31)

Bon,

J'ai continué mes recherches et CORS se configure coté serveur, dans la config du serveur qui reçoit les requêtes :

<VirtualHost *:80>
	ServerName url-serv
	***
	<Directory ***>
		***
		Header set Access-Control-Allow-Origin "*"
		Header set Access-Control-Allow-Methods "*"
		Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
	</Directory>
</VirtualHost>

pc.controller('connexionCtrl', function ($scope, $http){
  var id = "test";
  var mdp = "mdp_test";
  // connexion
  $scope.connexionUtilisateur = function() {
    $http({
      method: 'POST',
      url: 'http://url-serv/',
      data: { id : id, mdp : mdp }
    }).then(function successCallback(response) {
      console.log("succes : " + response.data);
    }, function errorCallback(response) {
      console.log("erreur : " + JSON.stringify(response));
    });
  }
});

Que vois-je dans ma console ? Le texte de mon serveur \o/

Mais de nouveaux problèmes s'annoncent :
* les paramètres que j'ai passé au serveur (id et mdp) ne semblent pas reçus (alors que j'ai fait un var_dump($_POST[]))
* chaque envoi au serveur se fait deux fois : la première en OPTIONS, la seconde en POST (et elles contiennent toutes les deux la même réponse, provenant de mon serveur). Pourquoi ?

Bien à vous
Modifié par Gam (03 Apr 2017 - 17:14)

Bonjour félicitation pour la solution est ce que vous pouvez m'aider j'avais le meme probleme et je ne sais pas comment je peux regler ce probleme depuis 3 jours voila c mon code PHP:

<?php
include ("db.php");
header("Content-Type: application/json; charset=UTF_8");
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');

$query = "select * from news ORDER BY jour DESC";
$result = $db->query($query);

$res['news'] = [];
while($cat = $result->fetch_assoc()) {
$cat['img'] = "news/".$cat['img'];

$res['news'][] = $cat;
}
echo json_encode($res);


je travaille avec le framwork ionic 3 en local tt ca marche bien mais cote serveur il s'affiche ce type d erreur

Object { _body: error, status: 0, ok: false, statusText: "", headers: {…}, type: 3, url: null }
home.ts:26:6
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://cxcc.com/api.php. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.
Modifié par malikmotii (08 Feb 2018 - 00:27)