Angular 9 Ionic 5 httpclient post 发送空数组

Question

我正在使用 Angular 9 和 Ionic 5 创建一个应用程序，我对此很陌生，如果我遗漏了一些明显的东西，请原谅我。以下是我的App代码：

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，它是一个打印为 {} 的空数组或只是一个空白 space（无法始终如一地打印“{}”）。我什至试过

count($data);

然后 returns 0.

Answer 1

我已经在我的本地机器上进行了测试，它可以将 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);
    }); 
  }
}

后台php脚本authtest.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]);

运行 ionic 应用程序后我在 Chrome 中得到的输出：

Angular 9 Ionic 5 httpclient post 发送空数组

Angular 9 Ionic 5 httpclient post sending empty array

angular

ionic-framework

angular9

angular-httpclient

ionic5