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

Question

我在從 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;

服務器向我返回一條消息：“接收到的數據：未定義”，我不知道為什么 req.body.login 未定義。 你能幫助我嗎？ 先感謝您。

PS：我用的時候也是一樣

"login": "zupa"

代替

login: "zupa"

Answer 1

您應該設置適當的標頭，因為您使用的是JSON。

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

Answer 2

檢查接受的答案Angular2 - 為每個請求設置標頭

它包括一個自定義的http客戶端來處理您的請求，因此您不必為每個請求編寫標頭。