非常簡單的AngularJS $ http POST結果為'400（錯誤請求）'和'無效的HTTP狀態代碼400'

Question

我在Azure中托管了一個非常簡單的.NET Web API，它有兩個非常簡單的方法：

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

我創建了一個簡單的插件來調用這些方法。 在我的AngularJS代碼中，我正在進行兩個非常簡單的$ http調用。 GET工作正常。 然而，POST總是返回“400（錯誤請求）”，緊接着在我的WebStorm控制台中“XMLHttpRequestion無法加載......無效的HTTP狀態代碼400”。

任何和所有建議贊賞！

編輯！！

您好，感謝非常快速的回復。 我剛剛意識到我忘了添加一些非常相關的細節。

我的POST方法的參數是我稱之為Envelope的對象，它包含兩個屬性： listingId (int)和Description (string) 。 當我添加urlencoded Content-Type標頭，並傳遞'{"listingId":1234, "Description":"some description"}'作為我的POST數據時，我在服務器上的POST方法中的env參數是NULL（即，它似乎無法解析我提供的JSON）。 對不起，這是原始帖子中省略的。

Answer 1

我認為這篇文章會有所幫助。

如何在AngularJS中使用$ http發布urlencoded表單數據？

默認情況下，$ http服務將通過將數據序列化為JSON來轉換傳出請求，然后使用內容類型“application / json”發布它。 當我們想要將值作為FORM帖子發布時，我們需要更改序列化算法並使用內容類型“application / x-www-form-urlencoded”發布數據。

這是你的修改過的plnkr。 您的代碼缺少JSON到已編碼網址的轉換。

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

Answer 2

我發現了一篇糾正我的問題的博文：

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

感謝大家幫助我！

Answer 3

使用AngularJS，您可以更輕松地完成。

您可以注入$httpParamSerializer ，然后通過$httpParamSerializer(data)准備$httpParamSerializer(data) 。

所以你的電話應該是這樣的：

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