与访问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