web-dev-qa-db-fra.com

Très simple AngularJS $ http POST Résultats dans '400 (Requête incorrecte)' et 'Code d'état HTTP non valide 400'

J'ai une API Web .NET très simple hébergée dans Azure, avec deux méthodes très simples:

[EnableCors(origins: "http://simpleapiearl.azurewebsites.net", headers: "*", methods: "*")]
public class EnvelopesController : ApiController {
    // GET: api/Envelopes
    public IEnumerable<string> Get() {
        return new string[] { "value1", "value2" };
    }

    // POST: api/Envelopes
    public string Post([FromBody]Envelope env) {
        return "rval: " + env + " (and my addition to env)";
    }
}

J'ai créé un simple plunk pour appeler ces méthodes. Dans mon code AngularJS, je fais deux très simples appels $ http. Le GET fonctionne bien. Cependant, le POST renvoie toujours un "400 (Requête incorrecte)", suivi brièvement dans ma console WebStorm par "XMLHttpRequestion ne peut pas être chargé ... Code d'état HTTP non valide 400".

Toutes les suggestions appréciées!

MODIFIER!!

Bonjour et merci pour les réponses très rapides. Je viens de me rendre compte que j'ai oublié d'ajouter des détails très pertinents. 

Le paramètre de ma méthode POST est ce que j'appelle un objet Envelope, qui contient deux propriétés: listingId (int) et Description (string). Lorsque j'ajoute l'en-tête Content-Type avec code url et que je passe '{"listingId":1234, "Description":"some description"}' comme données POST, le paramètre env de ma méthode POST sur le serveur est NULL (il semble impossible d'analyser le code JSON I je fournis). Désolé, cela a été omis du post original.

javascriptangularjsazure
10
EarlD

Je pense que ce post serait utile.

Comment puis-je POST coder les données de formulaire avec $ http dans AngularJS?

Par défaut, le service $ http transformera la demande sortante en sérialiser les données au format JSON, puis les poster avec le contenu - tapez "application/json". Lorsque nous voulons publier la valeur en tant que FORM post, nous devons changer l’algorithme de sérialisation et poster les données avec le type de contenu, "application/x-www-form-urlencoded".

Ceci est la version modifiée de la vôtre. Votre code manque la conversion de JSON en URL encodée.

http://plnkr.co/edit/4aeEDz73qgHSfOv1sBgn?p=preview

$http({
    method: 'POST',
    url: 'http://simpleApiEarl.azurewebsites.net/api/envelopes',
    data: env,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
      var str = [];
      for(var p in obj)
      str.Push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
      return str.join("&");
    }
  }).
17
allenhwkim

J'ai trouvé un article de blog qui corrige mon problème:

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Merci à tous de m'avoir aidé!

1
EarlD

Avec AngularJS, vous pouvez le faire plus facilement. 

Vous pouvez injecter $httpParamSerializer puis préparer vos données via $httpParamSerializer(data).

Donc, votre appel devrait ressembler à quelque chose comme: 

$http({
    method: 'POST',
    url: 'http://simpleApiEarl.azurewebsites.net/api/envelopes',
    data: $httpParamSerializer(env),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  })
0
quirimmo