ionic2不发送帖子数据答案

【问题标题】：ionic2 not sending post dataionic2不发送帖子数据
【发布时间】：2017-08-18 13:22:38
【问题描述】：

以下是我的 auth.service.ts 中的一个函数，我从我的一个页面调用它..

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {

  public token: any;

  constructor(public http: Http, public storage: Storage) {

  }
login(credentials){

return new Promise((resolve, reject) => {
    console.log(credentials);
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    this.http.post('https://mysite.co.uk/ionlogin.php', JSON.stringify(credentials), {headers: headers})
      .subscribe(res => {

        let data = res.json();
        this.token = data.token;
        this.storage.set('token', data.token);
        resolve(data);

        resolve(res.json());
      }, (err) => {
        reject(err);
      });

});

}
}

上述登录函数调用成功，但没有发送任何数据。但是在发布请求之前在控制台中打印 console.log(credentials)。

{电子邮件：“sugumar”，密码：“123456”}

但是在浏览器的网络选项卡中，我没有看到任何发送到服务器的数据。

在我正在打印的服务器中使用

var_dump(json_decode(file_get_contents("php://input")));

它在浏览器的网络选项卡中打印 null

我还在控制台中看到以下错误

XMLHttpRequest 无法加载 https://mysite.co.uk/ionlogin.php。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin。

所以我在我的 php 中添加了以下几行

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, 
    X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");

但还是同样的问题

【问题讨论】：

你有什么错误吗？
@DMCISSOKHO 没有错误兄弟
不相关，但Observable 对象上有一个toPromise() 方法...
@n00dl3 bro 我是 ionic 新手，所以请告诉我如何使用它
你确定，你的 php api 代码工作正常吗？

标签： angular ionic2

【解决方案1】：

尝试使用RequestOptions，而不是直接将标头作为对象发送

import { Http, Headers, RequestOptions } from '@angular/http';

public login = () => {
  return new Promise((resolve, reject) => {
    let headers = new Headers({'Content-Type', 'application/json'});
    // JUST TOOK OFF APPEND CAUSE I LIKE THIS WAY, THERE'S NO NEED FOR YOU TO REMOVE IT.
    let options = new RequestOptions({headers: headers});
    this.http.post('https://mysite.co.uk/ionlogin.php', JSON.stringify(credentials), options)
    .subscribe(res => {

      let data = res.json();
      this.token = data.token;
      this.storage.set('token', data.token);

      // WHY DO YOU RESOLVE THIS TWICE? IT'LL ONLY GET THE FIRST RESOLVE
      resolve(data);
      resolve(res.json());
    }, (err) => {
      reject(err);
    });
  });
}

RequestOptions 模块根据请求的 Fetch Spec 创建您的选项，可能仅将标头作为对象传递会使其失败或缺少请求选项提供的某些内容。

希望这会有所帮助。

【讨论】：