使用$ http POST Content-Type應用程序/ x-www-form-urlencoded訪問API

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

但是我總是這樣：

對象{數據：“ {”結果“：”假“}”“，狀態：200，配置：對象，狀態文本：”確定“，標頭：功能}

要么

{“ data”：“ {\\” result \\“：\\” false \\“}”，“狀態”：200，“ config”：{“方法”：“ POST”，“ transformRequest”：[null]，“ transformResponse “：[null]，”標頭“：{” 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” }

如果我將header Content-Type更改為：

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

它給：

對象{數據：null，狀態：-1，配置：對象，statusText：“”，標頭：函數}

要么

{“數據”：null，“狀態”：-1，“配置”：{“方法”：“ POST”，“ transformRequest”：[null]，“ transformResponse”：[null]，“標題”：{“內容-Type“：” application / json; charset = UTF-8“，” Accept“：” application / json，text / plain， / “}，” url“：” https：//myurl../api/getHPData “ ，“數據”：{“ stationId”：263，“ crusherId”：27，“ monthYear”：“ 2016-4”}}，“ statusText”：“”}

我做錯了，請幫幫我。

柱塞在這里：

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”是：26862.94萬

這是完美的。 :)

Answer 1

發布使用URL編碼的表單數據時，請使用$ httpParamSerializer服務轉換請求：

$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函數可解決該問題。

PLNKR上的演示

Answer 2

該文檔說stationId和rusherId參數應該是字符串數組。 另外，您似乎正在發送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方法'OPTIONS'。 ”

正如正確提及的其他（現在已刪除）答案一樣，這意味着存在CORS問題。 瀏覽器在發出跨域請求之前嘗試發送“預檢”請求，服務器不知道該如何處理。 您還可以在Chrome控制台中看到此消息：

XMLHttpRequest無法加載https://fnrc.gov.ae/roayaservices/api/getHPData 。 飛行前的響應具有無效的HTTP狀態代碼405