角2ノード/ Express Serverエンドポイントへのリクエスト

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