Ionic 2 - 未发送 Http POST 正文参数

Question

我正在使用 Ionic 2 Beta 11。我正在尝试向外部 API 发送请求，这将 return 一个 JSON 响应。我已经克服了 CORS 问题，我正在与 API 通信，但是 我无法发送所需的正文信息。我尝试通过以下方式格式化 body 变量，但均未成功：

作为对象：{email: this.email, password: this.password}

作为字符串化对象：JSON.stringify({email: this.email, password: this.password})

作为字符串：'email=' + this.email + '&password=' + this.password

这是我的代码：

import {Component}                                      from '@angular/core';
import {NavController, MenuController}                  from 'ionic-angular';
import {Http, Headers, RequestOptions}                  from '@angular/http';
import 'rxjs/Rx';

@Component({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  nav: NavController;    
  username: string;
  password: string;

  constructor(nav: NavController, private http: Http) {
    this.nav = nav;
  }

  doLogin() {
    let body = JSON.stringify({
      email: this.username,
      password: this.password });
    let headers = new Headers({
      'NDAPI-Key': 'XXXXXXXXXX',
      'NDAPI-Host': 'XXXXXXXXXXX' });
    let options = new RequestOptions({ headers: headers });

    this.http
        .post('/api', body, options)
        .map(res => res.json())
        .subscribe(
            data => {
              console.log(data);
            },
            err => {
              console.log("ERROR!: ", err);
            }
        );
  }
}

Answer 1

我刚刚找到了解决问题的方法。我试图向服务器发送一些 X 类型的数据，同时告诉服务器我正在发送 Y 类型的数据。对于我发送的数据类型，我仍然有点困惑，但是我已经能够解决我的问题使用以下代码来解决问题：

import {Component}                                      from '@angular/core';
import {NavController}                                  from 'ionic-angular';
import {Http, Headers, RequestOptions}                  from '@angular/http';
import 'rxjs/Rx';

@Component({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  nav: NavController;

  username: string;
  password: string;

  constructor(nav: NavController, private http: Http) {
    this.nav = nav;
  }

  doLogin() {
    let body = new FormData();
    body.append('email', this.username);
    body.append('password', this.password);
    let headers = new Headers({
      'NDAPI-Key': 'XXXXXXXXX',
      'NDAPI-Host': 'XXXXXXXXX' });
    let options = new RequestOptions({ headers: headers });

    this.http
        .post('/api', body, options)
        .map(res => res.json())
        .subscribe(
            data => {
              console.log(data);
            },
            err => {
              console.log("ERROR!: ", err);
            }
        );
  }
}

Answer 2

我是 Ionic 2 的新手，但经过长时间搜索后，表单数据选项对我有用，如下所示

let headers = new Headers({ 'Content-Type': 'application/json' });
    let body = new FormData();
    body.append('username', username);
    body.append('password', password);
    console.log(body);
    console.log(headers);
    return this.http.post('http://api/v1/get_user',body,headers).map((res: Response) => res.json());

Answer 3

我遇到了同样的问题，我的参数没有发布到我的 PHP 服务器。我将参数更改为原始格式（显示在我的 body 变量中），它开始工作了。请参阅下面的示例代码。

    let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
    let options = new RequestOptions({
        headers: headers
    });
    // TODO: Encode the values using encodeURIComponent().
    let body = 'email=' + email + '&password=' + password;

Answer 4

Angular2 Ionic 2 HTTP Post 方法

import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {


constructor(public http:Http) { }


postCall()
{
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let data=JSON.stringify({username:"raja"});
this.http.post('http://localhost/ionic/postResponse.php',data,headers)
.map(res => res.json())
.subscribe(res => {
alert("success "+res);
}, (err) => {
alert("failed");
});
}


}

有关详细信息，请访问 https://ampersandacademy.com/tutorials/ionic-framework-version-2/send-data-and-receive-data-in-the-ionic-2-framework-using-angular2-http-post-method

Ionic 2 - 未发送 Http POST 正文参数

Ionic 2 - Http POST body parameters not being sent

http

ionic-framework

ionic2

angular