使用$http POST访问API，内容类型为application/x-www-form-urlencoded。

10 浏览
0 Comments

使用$http POST访问API，内容类型为application/x-www-form-urlencoded。

我正在尝试访问这个接受三个参数的REST API：

stationId，crusherId，monthYear

我在AngularJS中这样做：

$http({
      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(data);
   })
  .catch(function(error){
          console.log(error);
      })

但我总是得到以下结果：

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

或者

{"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"}

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

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

它会给出：

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

或者

{"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 是：

  • Value is: {"stationId":263,"crusherId":27,"monthYear":"2016-04"}
  • XHR finished loading: POST

    "https://myurl../api/getHPData".

  • Log of foo is: 26862094
  • "26862094" in million is: 26.862094 million

这是完美的。:)

0

2 答案

0 Comments

问题的出现原因是由于发送的请求中的Content-Type头部字段设置错误，应该设置为'application/x-www-form-urlencoded'，而不是'application/json'。解决方法是将Content-Type头部字段设置为'application/x-www-form-urlencoded'，并将请求体的数据格式进行相应的转换。

以下是整理后的文章：

在文档中提到，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'
    }
})

当我把你的代码改成上面的正确代码后，我得到以下响应："The requested resource does not support http method 'OPTIONS'."

正如其他回答中正确提到的，这意味着存在跨域资源共享（CORS）问题。浏览器在发起跨域请求之前会发送一个"preflight"请求，而服务器不知道如何处理它。你还可以在Chrome控制台中看到以下消息：

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

我尝试了这个方法，它也返回了以下结果：{"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://fnrc.gov.ae/roayaservices/api/getHPData","data":{"stationId":[263],"crusherId":[27],"monthYear":"2016-4"}},"statusText":"OK"}

由于你发送的是JSON数据，你还应该将Content-Type设置为JSON。我会更新我的答案。

谢谢你更新了你的答案，但仍然给我相同的错误。请注意，这个错误来自.catch(function(error)。我不知道该怎么办。你能看一下我在问题中包含的Plnkr链接吗？

当我将你的代码改成上面的代码后，我得到以下错误："{"Message":"The requested resource does not support http method 'OPTIONS'."}"，这意味着另一个回答是正确的，存在CORS问题。Chrome正在尝试发送一个"preflight"请求来允许CORS，但服务器不知道该如何处理。

你好，谢谢你编辑和查看plnkr。我从这里验证了所有的值，如stationId: 263, crusherId: 27, monthYear: '2016-4'

如果是这样，那么可能是你的参数值不正确？比如，你从API那里得不到任何结果？

我已经验证了所有的值，在这里，如stationId: 263, crusherId: 27, monthYear: '2016-4'

不幸的是，我觉得我帮不上太多忙了。看起来你的代码符合API的要求，所以我无法想象为什么会返回"false"（并且该文档对响应的含义没有明确说明）。祝你好运，很抱歉我不能提供更多帮助！

谢谢你的时间。对于文档链接和其他有用的东西，+1！

谢谢！很高兴有人能够帮到你。

0
0 Comments

问题的出现原因是，当使用$http的POST方法发送URL编码的表单数据时，通常$http服务会自动解析JSON编码的对象结果。但是在这个例子中，API返回的是一个经过两次序列化的字符串，导致解析结果出错。

解决方法是使用$httpParamSerializer服务来转换请求数据，同时使用transformResponse函数来修复解析结果的问题。在transformRequest中使用$httpParamSerializer将数据转换为URL编码的形式，transformResponse函数将字符串解析为对象。

在未使用$httpParamSerializer服务的旧版本AngularJS（1.2.21）中，可以使用其他方式来转换请求数据，以满足API的要求。

要获取valueResult中的gytotal值，可以使用代码parseFloat(response.data.valueResult.gytotal)来提取。

如此解决了使用$http POST访问API时遇到的问题。

0