Angular $ http.post返回空错误

时间:2015-08-17 13:30:07

标签: angularjs node.js post

我使用angular JS将一些数据发送到nodejs服务器。

当我使用curl时,我收回了我发送的数据(正确的结果):

curl -d '{"MyKey":"My Value"}' -H "Content-Type: application/json" 'http://127.0.0.1:3000/s?table=register_rings&uid=1'
> {"MyKey":"My Value"}

但是,当我使用angularjs服务时,会发生错误。

.factory('RegisterRingsService', function($http, $q) {
    // send POST request with data and alert received
    function send(data, uid) {

  $http({
            method: 'POST',
            url: 'http://127.0.0.1:3000/s?table=register_rings&uid=1',
            data: '{"MyKey":"My Value"}',
            headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin":"*"},
            responseType: 'json'
        }).success(function(data, status, headers, config) {
            alert('success', data, status);
        }).error(function(data, status, headers, config) {
            alert('error' + JSON.stringify(data) + JSON.stringify(status));
        }).catch(function(error){
            alert('catch' + JSON.stringify(error));
        });
}   

return  {send : send};  
  })

错误如下:

{"data":null,"status":0,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"http://127.0.0.1:3000/s?table=register_rings","data":"{\"MyKey\":\"My Value\"}","headers":{"Content-Type":"application/json","Access-Control-Allow-Origin":"*","Accept":"application/json, text/plain, */*"},"responseType":"json"},"statusText":""}

我怀疑我应该插入CORS标头,但我不知道该怎么做。

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:4)

问题是如何将数据传输到服务器。这是因为jQuery和Angular以不同方式序列化数据。

默认情况下,jQuery使用Content-Type: x-www-form-urlencoded和熟悉的foo=bar&baz=moe序列化来传输数据。然而,AngularJS使用Content-Type: application/json{ "foo": "bar", "baz": "moe" } JSON序列化传输数据,遗憾的是,一些Web服务器语言 - 特别是PHP - 本身不会反序列化。

为了解决这个问题,AngularJS开发人员提供了$http服务的钩子,让我们强加x-www-form-urlencoded

$http({
   method  :'POST',
   url:'...',
   data: data, // pass in data as strings
   headers :{'Content-Type':'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload)
});

请阅读这篇文章以获得有效的解决方案:

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/