Angular 2发布节点/ Express Server端点请求 [英] Angular 2 Post Request to Node/Express Server Endpoint

查看:89
本文介绍了Angular 2发布节点/ Express Server端点请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I can't seem to diagnose why I can't send a successful HTTP request in my Angular 2 Typescript application. I send POST requests successfully through Postman, but the front-end seems to be unhappy about linking to the back-end... there's no error, and the back-end never responds. Please help!

我在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 ,一切都无济于事!

I've tried posting to /email, http://localhost:8080/email, https://{appName}-{username}.c9users.io/email, all to no avail!

我做错了什么?我很感激帮助!

What am I doing wrong? I appreciate the help!

编辑:蒂埃里已在这里回答,所以这是一个骗局。
angular2:http post not execution

Thierry already answered here, so this is a dupe. angular2: http post not executing

推荐答案

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

There is a mismatch between the content type and the content you provide to the POST method.

如果您需要使用网址编码的表单,则需要以这种方式更新代码:

If you expect url-encoded form, you need to update your code this way:

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内容,只需更改<$的值c $ c> Content-Type 标题:

If you want to send JSON content, just change the value of the Content-Type header:

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应用程序提供以下内容:

Moreover I think that you endpoint isn't located on the same machine unless you serve it through your Express application with something like this:

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

这篇关于Angular 2发布节点/ Express Server端点请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆