如何从AngularJS向本地服务器上的应用程序发出$ http请求？

Question

目前的情绪

我正试图在我的控制器中定义的以下函数中从Angular发出$ http post请求:

$scope.sendUserData = function(){
    var userData = JSON.stringify({
        'firstName': $scope.firstName,
        'lastName': $scope.lastName,
        'email': $scope.email
    });
    console.log(userData); //this prints out the JSON I want
    var config = {
        headers: {
            'Content-Type': 'json'
        }
    };
    $http.post('/api/users', userData, config)
        .success(function(data){
            console.log(data);
        })
        .error(function(data){
            console.log('Error: ' + data)
        });

我有一个Express API,我想通过下面定义的路由处理程序接收这个$ http post请求:

router.route('/users')
.post(function(req, res){
    var user = new User();
    user.firstName = req.body.firstName;
    user.lastName = req.body.lastName;
    user.email = req.body.email;
    user.save(function(error){ //add into mongodb
        if(error){
            res.send(error);
        }
        else{
            res.json({message: 'User created'});
        }
    });
})

我正在运行前端npm http-server,允许我http://127.0.0.1:8080在Chrome中访问我的index.html .我有我的快递应用程序使用以下行听同一个端口app.listen(8080, '127.0.0.1');

问题

当我尝试从http://127.0.0.1:8080Angular函数的前端发出http请求时,我想将JSON数据记录到控制台,但是没有发出$ http请求,我在Chrome控制台中收到以下错误:

POST http://127.0.0.1:8080/api/users 405 (Method Not Allowed)

我可以从Postman成功发出http post请求,我看到JSON完全添加到我的mongodb集合中.

我是否收到此错误,因为index.html /前端未连接到Express应用程序？从根本上说,我不明白这是如何运作的.Express应用程序是否应该侦听index.html运行的同一个端口？连接前端和后端的情况与应用程序在本地服务器上运行到应用程序在Internet上运行时的情况有何不同？

如果有人可以向我解释前端应该如何连接到后端,或者如果我做其他任何错误,我会非常感激.

谢谢!

Answer 1

您试图发布不是JSON但是字符串:

var userData = JSON.stringify({
    'firstName': $scope.firstName,
    'lastName': $scope.lastName,
    'email': $scope.email
});

发布JSON代替

var userData = {
    'firstName': $scope.firstName,
    'lastName': $scope.lastName,
    'email': $scope.email
};

为了您的信息,HTTP标头由$ http服务自动设置

var config = {
    headers: {
        'Content-Type': 'json'
    }
};