使用 $http 将数据从 angularJS 发布到 Express

Question

我正在尝试将一些 json 数据从 angularjs 发送到 express/nodejs

AngularJS 代码：

$http({
      method: 'POST',
      url: 'http://localhost:8000/api/auth',
      data: {
         name: user,
         password: passwd
      },
      headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
      }
   })
   .success(function(data, status, headers, config) {
      $scope.loginStatus = data;
   })
   .error(function(data, status, headers, config) {
      $scope.lloginStatusogin = data;
   });

ExpressJS 代码：

var express = require('express');
var app = express();


var config = require('./config'); // get our config file


var port = process.env.PORT || 8000; // used to create, sign, and verify tokens

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
   extended: true
}));

app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

var apiRoutes = express.Router();

apiRoutes.post('/auth', function(req, res) {

   console.log(req.body)
});

app.use('/api', apiRoutes);
app.listen(port);

但是在快速记录req.body 时，我得到了这个对象 { '{"name":"Nick","password":"password"}': '' }，整个 json 对象被视为具有空值的属性，我不明白或看不出做错了什么。

Answer 1

如果您尝试发送对象，请发送Content-Type: application/json。 application/x-www-form-urlencoded 需要一个 urlEncoded 字符串作为正文属性。以下两种解决方案都适合您，请选择一个。

使用application/json content-type 将 JSON 对象作为正文发送

$http({
    method  : 'POST',
    url     : 'http://localhost:8000/api/auth',
    data    : {
        name: user,
        password: passwd
    },
    headers : {'Content-Type': 'application/json'}
})
.success(function(data, status, headers, config){
    $scope.loginStatus=data;
})
.error(function(data, status, headers, config){
    $scope.lloginStatusogin=data;
});

 

---

在正文中发送带有application/x-www-form-urlencoded content-type 的urlEncoded sring。

transformRequest 将在发送请求之前基于data 创建一个 urlEncoded 字符串。

$http({
    method: 'POST',
    url: 'http://localhost:8000/api/auth',    
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    },
    data: {
        name: user,
        password: passwd
    },
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config){
    $scope.loginStatus=data;
})
.error(function(data, status, headers, config){
    $scope.lloginStatusogin=data;
});

Answer 2

在标题部分：应该是

{'Content-Type': 'application/json'} 

而不是

{'Content-Type': 'application/x-www-form-urlencoded'}