Angular 9 Ionic 5 httpclient post发送空数组

Question

我正在使用 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 或者他们使用并建议订阅 observable - 我已经在这样做了。

在另一端，php 代码很简单：

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

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

count($data);

然后返回 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);
    }); 
  }
}

后端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]);
    

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