2014-10-01 67 views
10

我已經在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)"; 
    } 
} 

我創建了一個simple plunk來調用這些方法。在我的AngularJS代碼中,我做了兩個非常簡單的$ http調用。 GET工作正常。但是,POST總是返回一個「400(Bad Request)」,緊接着在我的WebStorm控制檯中出現「XMLHttpRequestion無法加載...無效的HTTP狀態代碼400」。

任何和所有建議表示讚賞!

編輯!

你好,並感謝非常快的反應。我只是意識到我忘了添加一些非常相關的細節。

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

+0

檢查你是否有任何形式的'xsrf'標記。如果是這種情況,不要忘記發送該令牌。 – 2014-10-01 12:34:50

+0

預檢(OPTIONS)請求失敗。看看這是否有幫助http://stackoverflow.com/questions/17713412/cors-post-requests-not-working-options-bad-request-the-origin-is-not-allow – Chandermani 2014-10-01 12:40:42

+0

可能的重複[我如何POST urlencoded在AngularJS中使用$ http形式的數據](http://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs) – allenhwkim 2014-10-01 17:15:09

回答

17

我覺得這篇文章會有所幫助。

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

默認情況下,$ http服務將通過 變換傳出請求序列化數據爲JSON,然後與內容 - 類型,「應用/ 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("&"); 
    } 
    }). 
+0

感謝您的類似的答覆,我最終發現不久前。道具! – EarlD 2014-10-01 19:18:11

+0

np,如果目標主機沒有改變,配置'$ httpProvider.defaults'是一個好主意。 – allenhwkim 2014-10-01 19:24:54

+0

@allenhwkim我在我的項目中使用了相同的代碼,錯誤仍然存​​在,並在描述中顯示「無效的Json」。請指導我解決該錯誤。 – Developer 2015-08-17 07:11:44