非常简单的 AngularJS $http POST 结果为“400(错误请求)"和“无效的 HTTP 状态代码 400" [英] Very Simple AngularJS $http POST Results in '400 (Bad Request)' and 'Invalid HTTP status code 400'

问题描述

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

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

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

我创建了一个 简单的 plunk 来调用这些方法.在我的 AngularJS 代码中，我进行了两个非常简单的 $http 调用.GET 工作正常.但是，POST 总是返回400(错误请求)"，然后在我的 WebStorm 控制台中很快返回XMLHttpRequestion 无法加载...无效的 HTTP 状态代码 400".

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

感谢任何和所有建议！

编辑！！

您好，感谢您的快速回复.我刚刚意识到我忘记添加一些非常相关的细节.

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

我的 POST 方法的参数是我所说的 Envelope 对象，它包含两个属性:listingId (int) 和 Description (string).当我添加 urlencoded Content-Type 标头，并通过 '{"listingId":1234, "Description":"some description"}' 作为我的 POST 数据时，我的 POST 方法中的 env 参数服务器为 NULL(也就是说，它似乎无法解析我提供的 JSON).抱歉，原帖中省略了这一点.

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.

推荐答案

我认为这篇文章会有所帮助.

I think this post would be helpful.

我该怎么做在 AngularJS 中使用 $http POST urlencoded 表单数据?

默认情况下，$http 服务将通过将数据序列化为 JSON，然后将其与内容一起发布 -输入应用程序/json".当我们想将值作为 FORM 发布时post，我们需要更改序列化算法并发布数据内容类型为application/x-www-form-urlencoded".

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

这是您修改后的 plnkr.您的代码缺少 JSON 到编码网址的转换.

This is the modified plnkr from yours. Your code is missing conversion of JSON to encoded 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("&");
    }
  }).

这篇关于非常简单的 AngularJS $http POST 结果为“400(错误请求)"和“无效的 HTTP 状态代码 400"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！