Angular 9 Ionic 5 httpclient发布发送空数组

问题描述

我正在使用Angular 9和Ionic 5创建一个应用程序，对此我很陌生，所以如果我错过了明显的事情，请原谅我。以下是我的应用代码：

import { HttpClient } from '@angular/common/http';
etc...

constructor(private http: HttpClient) { }

  authenticate(phone: string,password: string) {
    let frmData = new URLSearchParams();
    // let frmData = new FormData(); //just to show that I have tried this also
    const headeroptions = {
      // 'enctype': 'multipart/form-frmData;',// when using FormData above
      'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    };
    frmData.append('emailOrMobile',phone);
    frmData.append('password',password);
    console.log("login: " + phone + " " + password); //this shows the values correctly
    console.log("frmData: " + frmData); //frmData: emailOrMobile=1234567890&password=111111
    return this.http.post<any>('https://example.com/APP/login.PHP',{frmData},{headers: headeroptions}
      // {"emailOrMobile":phone,"password":password} //Also tried without creating the object beforehand
    ).subscribe(data => {
      console.log("Subscribed Data: ");
      console.log(data);
    },error => {
            console.log('error: ' + error.error);
            console.log('Name: ' + error.name);
            console.log('Message: ' + error.message);
            console.log('Status: ' + error.status);
          });
  }

我还尝试了将.subscribe ...等替换为的其他版本：

.pipe(tap(this.setUserData.bind(this)));

但是那也不起作用。有很多解决方案，但是大多数解决方案都使用较旧版本的Angular，并且不使用HttpClient或建议使用可观察的方法-我已经在这样做了。

另一方面，PHP代码很简单：

$data = json_decode(file_get_contents("PHP://input"),true);

如果我回显或尝试使用$ data，它是一个空数组，打印为{}或只是一个空格（无法一致地打印'{}'）。我什至尝试过

count($data);

并返回0。

解决方法

我在本地计算机上进行了测试，它通过了args作为javascript对象：

{ emailOrMobile: phone,password: password}

在后端的php脚本中，我通常允许CORS请求。我不确定您的环境是否需要（请参阅命令header("Access-Control-Allow-Origin: *");）。

页面的完整打字稿：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-tab1',templateUrl: 'tab1.page.html',styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
    
  
  constructor(private http: HttpClient) {
    this.authenticate('123','mypassword');
  }

  authenticate(phone: string,password: string) {
    const headeroptions = {
      'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    };
  
    let params =  { emailOrMobile: phone,password: password};
    return this.http.post<any>('http://localhost/backend/authtest.php',params,{headers: headeroptions}).subscribe(data => {
      console.log("Subscribed Data: ");
      console.log(data);
    },error => {
      console.log('error: ' + error.error);
      console.log('Name: ' + error.name);
      console.log('Message: ' + error.message);
      console.log('Status: ' + error.status);
    }); 
  }
}

后端authtest.php中的php脚本：

<?php
    //Allow requests from different domain:
    header("Access-Control-Allow-Origin: *");

    $data = json_decode(file_get_contents("php://input"),true);
    
    echo json_encode([ 'success' => true,'params' => $data]);
    

运行离子应用程序后，我在Chrome中获得的输出：