Angular 2 向 Node/Express 服务器端点发布请求

Question

我似乎无法诊断为什么我无法在 Angular 2 Typescript 应用程序中发送成功的 HTTP 请求。我通过Postman成功发送POST请求，但是前端似乎对链接到后端不满意......没有错误，后端从来没有响应。请帮忙！

我在 C9 环境中工作。

这是我当前的实现：

import {Component} from 'angular2/core';
import {MessageBody} from '../message-body/message-body';
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http';

@Component({
  selector: 'signup',
  template: require('app/signup/signup.html'),
  styles: [require('app/signup/signup.css')],
  viewProviders: [HTTP_PROVIDERS],
  providers: []
})

export class Signup {
  model = new MessageBody(
    '',
    '',
    '',
    '');
  constructor(public http: Http) {
  }
  onSubmit() {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    this.http.post('/email', JSON.stringify(this.model), {headers: headers})
      .map(res => console.log(res.json()));
  }
}

这是服务器上的端点：

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/email', sendEmail);

app.use(express.static(__dirname +'/../dist'));

app.listen(process.env.PORT, listen);

我试过发帖到/email、http://localhost:8080/email、https://{appName}-{username}.c9users.io/email，都无济于事！

我做错了什么？感谢您的帮助！

编辑：蒂埃里已经在这里回答了，所以这是一个骗局。 angular2: http post not executing

Answer 1

内容类型与您提供给 POST 方法的内容不匹配。

如果您希望使用 url 编码的形式，则需要以这种方式更新您的代码：

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

  var content = new URLSearchParams();
  content.set('somefield', this.model.somefield);
  (...)

  this.http.post('/email', content.toString(), {headers: headers})
  .map(res => console.log(res.json()));
}

如果要发送 JSON 内容，只需更改 Content-Type 标头的值即可：

onSubmit() {
  var headers = new Headers();
  headers.append('Content-Type', 'application/json');

  this.http.post('/email', JSON.stringify(this/model), {headers: headers})
  .map(res => console.log(res.json()));
}

此外，我认为您的端点不位于同一台机器上，除非您通过您的 Express 应用程序提供类似这样的服务：

app.use(express.static('public'));