使Ajax调用Angular到Node.js(express.js)

时间:2013-10-30 15:53:18

标签: ajax node.js angularjs

我正在尝试简单的事情。对node express进行ajax调用并根据它执行某些操作。我无法访问req.body,我的意思是当从node.js端调试时它是空的

NODE SIDE。 我正在使用:

app.use(express.bodyParser());

这是快递中的地雷测试方法:

app.get('/courses', function(request, response) {
  console.log("I have been hit"); //I Am getting here               
});

ANGULAR SIDE:

eventsApp.factory('MainConnector', function($http, $q, $resource ) {
  return {
    mainConnection: function( ) {

      var requestBody = {
        id: 3,
        name: 'testname',
        lastname: 'testlastname'
      }

      $http.get("http://localhost:3000/courses", requestBody)
        .success(function(data, status, headers, config) {
          console.log("this is coming from wherever:" + data);
          $scope.data = data;
        }).error(function(data, status, headers, config) {
          $scope.status = status;
        });
    }      
  };
});

我正在尝试访问(从节点端)

req.body.name

但身体总是空的,好像我没有发送任何东西。

2 个答案:

答案 0 :(得分:4)

你的ExpressJS测试处理程序实际上没有响应任何数据,这就是为什么你得到一个空体。查看expressjs site for documentation

基本上你想要这样的东西

app.get('/courses', function(request, response) {
  console.log("I have been hit"); //I Am getting here
  response.send('hello world');            
});

其次,您尝试使用get请求发送数据。如果你看一下angularjs文档,你会发现$http.get只需要1个参数,即网址。

这意味着您想要的AngularJS工厂更像是这样:

eventsApp.factory('MainConnector', function($http, $q, $resource ) {
  return {
    mainConnection: function( ) 
      $http.get("http://localhost:3000/courses")
        .success(function(data) {
          console.log("this is coming from wherever:" + data);
        });
    }      
  };
});

但是假设您确实想要向服务器发送内容,您想要的是POST请求。这意味着您更新快递处理程序以响应POST而不是GET。

app.get('/courses', function(request, response) {
  response.send(request.body);            
});

这是一个简单的“echo”处理程序。无论客户端发送给客户端,它都会发送回客户端。如果你发送“Hello”,它将回复“你好”。

和相应的AngularJS服务工厂

eventsApp.factory('MainConnector', function($http, $q, $resource ) {
  return {
    mainConnection: function( )
      var data = {name: "hello"};
      $http.post("http://localhost:3000/courses", data)
        .success(function(data) {
          console.log("this is coming from wherever:" + data);
        });
    }      
  };
});

答案 1 :(得分:2)

事实证明,这是两个问题。是的,使用GET和发送有效负载存在此问题。但是,这并没有解决问题。问题出在CORS中。这就是我修复它的方法:

var allowCrossDomain = function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'content-type, Authorization, Content-Length, X-Requested-With, Origin, Accept');

    if ('OPTIONS' === req.method) {
        res.send(200);
    } else {
        next();
    }
};

app.configure(function () {
    app.set('port', process.env.PORT || 3000);
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);   
});