Angular2 http.post 和未定义的 req.body

Posted

技术标签:

【中文标题】Angular2 http.post 和未定义的 req.body【英文标题】:Angular2 http.post and undefined req.body 【发布时间】:2016-04-18 14:38:26 【问题描述】:

我在从 http.post 接收 json 时遇到问题。让我们说清楚一点: 这是我的组件文件:

import Component from 'angular2/core'
import Http, HTTP_PROVIDERS, Headers from 'angular2/http'

@Component(
  selector: 'login-form',
  template: `
    <form (ngSubmit)="onSubmit()">

      <button type="submit">Wyslij</button>
    </form>
  `
)

export class LoginFormComponent 
  constructor(public http: Http)  

  onSubmit() 
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    var data = JSON.stringify(
      login: "zupa",
    );

    this.http.post('http://localhost:8080/send', data, headers: headers)
    .subscribe();
  

我的 server.js 文件

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'node_modules')));
app.use(express.static(path.join(__dirname)));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

app.get('*', function(req, res, next) 
  res.render("index.html", title: 'Aplikacja');
);

app.listen(8080, function() 
  console.log("Starting at localhost:8080");
);

module.exports = app;

如您所见,这是一个由 express 模块服务器文件生成的标准。

这是我的“路线”文件的内容。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) 
  res.render('index.html', title: 'Infam');
);

router.post('/send', function(req, res, next) 
  console.log("Received data: " + req.body.login);
);

module.exports = router;

服务器向我返回一条消息:“收到的数据:undefined”,我不知道为什么 req.body.login 未定义。你能帮助我吗?提前谢谢你。

PS:我用的时候也是这样

"login": "zupa"

而不是

login: "zupa"

【问题讨论】:

只在服务器端注销 req.body 会得到什么。 请把'req'的内容贴出来 嘿,在这种情况下,我有[object Object]。当我使用console.log("Received data: " JSON.stringify(req.body)) 时,我有"\"login\":\"zupa\"":"",所以看起来解析有问题。 【参考方案1】:

您应该设置适当的标头,因为您使用的是 JSON。

headers.append('Content-Type', 'application/json');

【讨论】:

没错!我在我的 jquery 中使用了这个标头类型,但在这里我设置了很多教程中输入的内容,他们也在其中发送 json 文件(所以我有点困惑)。顺便说一句,有时我会忘记使用自己的大脑:P 谢谢!

以上是关于Angular2 http.post 和未定义的 req.body的主要内容,如果未能解决你的问题,请参考以下文章

angular2 http.post 方法抛出 typeerror 异常

如何使用带有表单数据主体而不是 json 主体的 http 'POST'? (Angular2/打字稿)

Angular2 HTTP Post ASP.NET MVC Web API

Angular2 HTTP POST发生错误SyntaxError:JSON输入意外结束

Angular2 http post请求到另一个端口上的nodejs服务器

在 Angular2 HTTP POST 中设置 JSON 请求标头