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

但我总是得到这个：

对象{数据：＆＃34; {＆＃34;结果＆＃34;：＆＃34; false＆＃34;}＆＃34;，状态：200，配置：对象，statusText：＆＃34;确定＆＃34;，header：function}

OR

{＆＃34;数据＆＃34;：＆＃34; {\＆＃34;结果\＆＃34;：\＆＃34;假\＆＃34;}＆＃34;＆＃34 ;状态＆＃34;：200，＆＃34;配置＆＃34; {＆＃34;方法＆＃34;：＆＃34; POST＆＃34;＆＃34; transformRequest＆＃34;：[空]，＆＃34; transformResponse＆＃34;：[空]，＆＃34;头＆＃34; {＆＃34;内容类型＆＃34;：＆＃34;应用程序/ X WWW的窗体-urlencoded; 字符集= UTF-8＆＃34;＆＃34;接受＆＃34;：＆＃34;应用/ JSON＆＃34;}＆＃34; URL＆＃34;：＆＃34; https://myurl../api/getHPData＆＃ 34;，＆＃34;数据＆＃34; {＆＃34;的stationID＆＃34; 263＆＃34; crusherId＆＃34;：27，＆＃34; monthYear＆＃34;：＆＃34; 2016- 4＆＃34;}}，＆＃34;状态文本＆＃34;：＆＃34; OK＆＃34;}

如果我将header Content-Type更改为：

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

它给出了：

Object {data：null，status：-1，config：Object，statusText：＆＃34;＆＃34;，headers：function}

OR

{＆＃34;数据＆＃34;：空，＆＃34;状态＆＃34;： - 1，＆＃34;配置＆＃34; {＆＃34;方法＆＃34;：＆＃34; POST＆＃34;＆＃34; transformRequest＆＃34;：[空]，＆＃34; transformResponse＆＃34;：[空]，＆＃34;头＆＃34; {＆＃34;内容类型＆＃34 ;：＆＃34;应用/ JSON; charset = UTF-8＆＃34;，＆＃34;接受＆＃34;：＆＃34; application / json，text / plain， / ＆＃34;}＆＃34; URL＆＃34;：＆＃34; https://myurl../api/getHPData＆＃34;＆＃34;数据＆＃34; {＆＃34 ;的stationID＆＃34; 263＆＃34; crusherId＆＃34;：27，＆＃34; monthYear＆＃34;：＆＃34; 2016-4＆＃34;}}，＆＃34;状态文本＆＃34 ;: ＆＃34;＆＃34;}

我做错了什么，请帮助我。

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的输出是：

价值是：{＆＃34; stationId＆＃34;：263，＆＃34; crusherId＆＃34;：27，＆＃34; monthYear＆＃34;：＆＃34; 2016-04＆＃34;} < / LI>
XHR完成加载：POST ＆＃34; https://myurl../api/getHPData＆＃34;
foo的日志是：26862094
＆＃34; 26862094＆＃34;百万是：26.862094万

哪个是完美的。 :)

Answer 1

发布经过网址编码的表单数据时，请使用$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数据，因此请确保正确设置该标头。

*.crashlytics.com
*.fabric.io

当我更改plunkr中的代码以使用上面更正的代码时，我得到以下响应：“请求的资源不支持http方法'OPTIONS'。”

正确提及的另一个（现已删除）答案，这意味着存在CORS问题。浏览器在发出跨源请求之前尝试发送“预检”请求，并且服务器不知道如何处理它。您还可以在Chrome控制台中看到此消息：

XMLHttpRequest无法加载 https://fnrc.gov.ae/roayaservices/api/getHPData。回应预检具有无效的HTTP状态代码405

使用$ http POST Content-Type application / x-www-form-urlencoded

2 个答案: