MEAN栈问题：无法向Node.js服务器发送POST请求求助

嘿，我来帮你排查这个问题！你遇到的请求没到服务器的情况，大概率是Angular HTTP请求的一个常见坑，我给你拆解一下问题和修复方案：

1. 核心问题：Angular HTTP请求未触发 #

Angular的Http（或者新版本的HttpClient）返回的是Observable，这类对象是「惰性执行」的——只有当你调用.subscribe()方法时，请求才会真正发送出去！你的ListsService里只写了this.http.post(...)，但没有订阅，所以请求根本没发起，服务器自然收不到。

修复服务文件：

import {Injectable} from "@angular/core";
import 'rxjs/rx';
import {Headers, Http} from "@angular/http";

@Injectable()
export class ListsService {
 constructor(private http: Http){}
 saveMovies(obj){
  const headers = new Headers({'Content-Type': 'application/json'});
  // 必须调用.subscribe()才会触发请求，同时可以处理响应和错误
  return this.http.post('http://localhost:3200/lists/savemovies', obj, {headers: headers})
    .subscribe(
      response => console.log('请求已发送，服务器响应：', response),
      error => console.error('请求失败：', error)
    );
 }
}

2. 组件代码的优化（避免额外问题） #

你的组件里用了同步XMLHttpRequest，这会阻塞浏览器主线程，而且没必要——Angular自带的HTTP客户端完全可以搞定。另外之前的setTimeout写法也可以简化：

优化后的组件代码：

import {Component} from "@angular/core";
import {ListsService} from "./lists.service";
import { Http } from "@angular/http"; // 导入Http

@Component({
 selector: 'app-top100',
 templateUrl: './top100.component.html',
 styleUrls: ['./top100.component.css']
})
export class Top100Component {
 link = "https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json"
 
 // 注入Http
 constructor(private listsService: ListsService, private http: Http){}

 getMovie() {
  // 用Angular的Http获取JSON，订阅后直接调用服务方法
  this.http.get(this.link).subscribe(jsonObj => {
    this.listsService.saveMovies(jsonObj);
  });
 }
}

这样既去掉了同步请求的阻塞问题，也不需要靠setTimeout等待数据加载，代码更简洁可靠。

3. 服务器端的潜在bug #

你已经在app.js里配置了bodyParser.json()，这意味着req.body已经是解析好的JSON对象了，不需要再用JSON.parse(req.body)——这会导致报错（因为req.body不是字符串）。另外，一定要给客户端返回响应，否则请求会一直处于挂起状态：

修复后的路由文件：

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

router.post('/savemovies', function(req, res, next) {
 var body = req.body; // 直接使用解析后的对象，不需要parse
 console.log('hello');
 console.log(typeof body);
 console.log(body);
 // 给客户端返回成功响应
 res.status(200).json({message: '电影数据已接收'});
});

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

module.exports = router;

验证步骤 #

1. 重启Node服务器；
2. 打开浏览器开发者工具（F12），切换到「Network」标签；
3. 点击组件里的按钮触发请求，查看是否有POST /lists/savemovies的请求；
4. 查看Node服务器的控制台，确认是否打印出hello和请求体内容。

按这个流程修改后，你的请求应该就能正常到达服务器啦！

内容的提问来源于stack exchange，提问作者tilly