到節點/ Express服務器端點的Angular 2發布請求

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 ，但都無濟於事！

我究竟做錯了什么？ 感謝您的幫助！

編輯：蒂埃里（Thierry）已經在這里回答了，所以這是一個騙子。 angular2：http發布未執行

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'));