與訪問API $ HTTP POST內容類型application/x-WWW窗體-urlencoded

Question

我試圖訪問此REST API，它接受三個參數： stationId，crusherId，monthYear 我做它像這樣在AngularJS如：

$http({ 
     //headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}, 
     //headers: {'Content-Type': 'application/json; charset=UTF-8'}, 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
      'Accept':  'application/json' 
     }, 
     url: 'https://myurl../api/getHPData', 
     method: 'POST', 
     data: { 
      stationId: 263, 
      crusherId: 27, 
      monthYear: '2016-4' 
     } 
    }) 

    .then(function(data, status, headers, config) { 
      //console.log(JSON.stringify(response)); 
      console.log(data); 
    }) 
    .catch(function(error){ 
      //console.log("Error: " + JSON.stringify(error)); 
      console.log(error); 
     }) 

但我總是得到這個：

Object {data: "{"result":"false"}", status: 200, config: Object, statusText: "OK", headers: function}

OR

{"data":"{\"result\":\"false\"}","status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"headers":{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8","Accept":"application/json"},"url":" https://myurl../api/getHPData ","data":{"stationId":263,"crusherId":27,"monthYear":"2016-4"}},"statusText":"OK"}

如果我改變headerContent-Type到：

headers: {'Content-Type': 'application/json; charset=UTF-8'}, 

它提供：

Object {data: null, status: -1, config: Object, statusText: "",headers: function}

OR

{"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"headers":{"Content-Type":"application/json; charset=UTF-8","Accept":"application/json, text/plain, /"},"url":" https://myurl../api/getHPData ","data":{"stationId":263,"crusherId":27,"monthYear":"2016-4"}},"statusText":""}

什麼我做錯了，請幫幫我。

Plunker是在這裏：

https://plnkr.co/edit/57SiCdBZB2OkhdR03VOs?p=preview

（編輯）

注： 我能做到這一點在jQuery爲：

<script> 
$(document).ready(function() { 
     get_homepage_data(263, 27, '2016-04'); 

     function get_homepage_data(stationIds, crusherIds, date) { 
      var url = "https://myurl../api/getHPData"; 
      var data_to_send = { 
       'stationId': stationIds, 
       'crusherId': crusherIds, 
       'monthYear': date 
      }; 

      console.log("Value is: " + JSON.stringify(data_to_send)); 
      //change sender name with account holder name 
      //  console.log(data_to_send) 
      $.ajax({ 
       url: url, 
       method: 'post', 
       dataType: 'json', 
       //contentType: 'application/json', 
       data: data_to_send, 
       processData: true, 
       // crossDomain: true, 
       beforeSend: function() { 
       } 
       , complete: function() {} 
       , success: function (result1) { 
        var Result = JSON.parse(result1); 
        var value_data = Result["valueResult"]; 
        var foo = value_data["gyydt"]; 

        console.log("Log of foo is: " + foo); 

        var foo2 = 0; 
        // 10 lac is one million. 
        foo2 = foo/1000000 + ' million'; 

        console.log(JSON.stringify(value_data["gyydt"]) + " in million is: " + foo2); 
       } 
       , error: function (request, error) { 
        return false; 
       } 
      }); 
     } 
    }); // eof Document. Ready 
</script> 

以上腳本的輸出是script是：

• 值是：{ 「的stationID」：263， 「crusherId」：27， 「monthYear」： 「2016-04」}
• XHR加載完成：POST 「https://myurl../api/getHPData」。
• 登錄FOO的是：26862094
• 「26862094」 百萬是：26862094

這是完美的。 :)

Answer 1

當發佈是URL編碼形式的數據，轉換與$httpParamSerializer service請求：

$http({ 
    headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}, 
    url: 'https://fnrc.gov.ae/roayaservices/api/getHPData', 
    method: 'POST', 
    transformRequest: $httpParamSerializer, 
    transformResponse: function (x) { 
     return angular.fromJson(angular.fromJson(x)); 
    }, 
    data: { 
     "stationId": 263, 
     "crusherId": 27, 
     "monthYear": '2016-04' 
    } 
}) 
    .then(function(response) { 
    console.log(response); 
    $scope.res = response.data; 
    console.log($scope.res); 
}); 

通常情況下，$ http服務自動解析結果來自JSON編碼對象，但是此API正在返回一個已從對象中雙重序列化的字符串。 transformResponse函數修復了這個問題。

的DEMO on PLNKR

Answer 2

The documentation說stationId和crusherId參數應該是字符串數組。另外，它看起來像是發送JSON數據，所以請確保正確設置該標頭。

$http({ 
    headers: { 
     'Content-Type': 'application/json', 
     'Accept':  'application/json' 
    }, 
    url: 'https://fnrc.gov.ae/roayaservices/api/getHPData', 
    method: 'POST', 
    data: { 
     stationId: ['263'], 
     crusherId: ['27'], 
     monthYear: '2016-4' 
    } 
}) 

當我在你的plunkr使用上述更正後的代碼更改代碼，我得到如下回應：「請求的資源不支持HTTP方法‘選項’」

由於其他（現已刪除）正確提及的答案，這意味着存在CORS問題。瀏覽器試圖在發出跨源請求之前發送「預檢」請求，而服務器不知道如何處理它。您也可以在Chrome控制檯中看到這樣一條消息：

XMLHttpRequest cannot load https://fnrc.gov.ae/roayaservices/api/getHPData . Response for preflight has invalid HTTP status code 405