非常简单的AngularJS $http POST导致'400(错误请求)'和'无效http状态码400'

I have a very simple .NET Web API hosted in Azure, with two very simple methods:

我有一个非常简单的。net Web API托管在Azure中，有两个非常简单的方法:

[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)";
    }
}

I have created a simple plunk to call these methods. In my AngularJS code, I'm making two very simple $http calls. The GET works fine. The POST, however, always returns a "400 (Bad Request)", followed shortly in my WebStorm console by "XMLHttpRequestion cannot load ... Invalid HTTP status code 400".

我创建了一个简单的plunk调用这些方法。在我的AngularJS代码中，我做了两个非常简单的$http调用。得到好工作。但是，POST总是返回一个“400(坏请求)”，随后在我的WebStorm控制台输入“XMLHttpRequestion can ' t load…”无效的HTTP状态码400。

Any and all suggestions appreciated!

谢谢您的建议!

EDIT!!

编辑! !

Hello, and thanks for the very fast responses. I just realized I forgot to add some very relevant detail.

大家好，谢谢你们的快速反应。我刚意识到我忘了添加一些非常相关的细节。

The parameter to my POST method is what I call an Envelope object, which contains two properties: listingId (int), and Description (string). When I add the urlencoded Content-Type header, and pass '{"listingId":1234, "Description":"some description"}' as my POST data, the env parameter in my POST method on the server is NULL (that is, it seems unable to parse the JSON I'm providing). Sorry this was omitted from original post.

POST方法的参数是我所称的Envelope对象，它包含两个属性:listingId (int)和Description (string)。当我添加urlencoding的Content-Type header，并将'{"listingId":1234， "Description":"some Description"}作为我的POST数据时，服务器上POST方法中的env参数为NULL(也就是说，它似乎无法解析我提供的JSON)。很抱歉，这在原来的帖子中被省略了。

3 个解决方案

#1

I think this post would be helpful.

我认为这篇文章会有帮助。

How do I POST urlencoded form data with $http in AngularJS?

如何在AngularJS中使用$http发布urlencodes格式数据?

By default, the $http service will transform the outgoing request by serializing the data as JSON and then posting it with the content- type, "application/json". When we want to post the value as a FORM post, we need to change the serialization algorithm and post the data with the content-type, "application/x-www-form-urlencoded".

默认情况下，$http服务将通过将数据序列化为JSON，然后将其与内容类型“application/ JSON”一起发布来转换传出请求。当我们希望将值作为表单post发布时，我们需要更改序列化算法，并使用内容类型“application/ www- FORM - urlencoding”发布数据。

This is the modified plnkr from yours. Your code is missing conversion of JSON to encoded url.

这是你的修改后的plnkr。您的代码缺少JSON到编码url的转换。

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("&");
    }
  }).

#2

I found a blog post that corrected my issue:

我发现了一篇纠正我问题的博文:

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

Thanks to everyone for helping me out!

谢谢大家的帮助!

#3

With AngularJS you can do in an easier way.

使用AngularJS，你可以用一种更简单的方式。

You can inject $httpParamSerializer and then prepare your data through $httpParamSerializer(data).

您可以注入$httpParamSerializer，然后通过$httpParamSerializer(数据)准备数据。

So your call should look something like:

所以你的电话应该是这样的:

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

#1