POSTMAN 上的 POST 请求成功，但 Angular 7 上没有

Question

我已经关注了这个链接：Postman 'POST' request sucess but Angular 5 'Post' not working，并按照它来纠正我的问题，但有些问题没有得到解决。它总是给我else block输出，我会在 Angular 代码中展示给你看。

注意：为 POSTMAN 完美工作。

可能的错误：我的 PHP 代码中存在无法识别输入的问题。

我的 API 是一个 POST API，它接受一个参数，即phone_num，这是强制性的。从 Postman 传递参数适用于 api，但是当我通过 Angular 进行时，它不起作用并转到else blockAPI 代码。

由于这是一个RAW PHP 代码，所以我不知道如何将这个microsoft.aspnet.webapi.cors 包导入到我的 RAW PHP 文件中，或者它是否会解决这个问题。

PHP代码：

<?php

    include('/Applications/MAMP/htdocs/api/Requests/library/Requests.php');

    $request_method = $_SERVER['REQUEST_METHOD'];

    if ( $request_method == 'POST' ){

            if(isset($_GET['phone_num'])){

               echo $_GET['phone_num'];

            }else{

              echo 'No phone number found';

            }

    }else {

        echo 'No defined function for this method. Please use POST only';

    }

?>

对于 POSTMAN，我phone_num在控制台/正文中显示。但是对于 Angular，控制台显示：No phone number found这很奇怪。

角代码：

import { Component } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class AppComponent {

  message: string;

  url: string = 'xxxxxxx';

  customernum: number;

  httpOptions = {

    headers: new HttpHeaders({

      'Content-Type': 'application/json',

    })

  };

  constructor(private http: HttpClient){}

  callMe(){

    this.message = 'Please wait....'

    this.http.post(this.url, JSON.stringify({ 'phone_num': this.customernum }), this.httpOptions).subscribe(

      response => console.log(JSON.stringify(response)),

      error => console.log(error)

    );

  }

}

我还检查了this.customernum是否在控制台中正确打印了数字，它正在控制台中传递，Network Console在Chrome Dev.

控制台中的错误日志：

Answer 1

您正在使用 $_GET 来检索您的“POST”数据尝试$_POST['phone_num']安装$_GET['phone_num']

Answer 2

为此，我个人要感谢两个人，他们是：Nijeesh Joshy用于排序的最大问题 METHOD to METHOD 与 PHP 脚本的矛盾。布拉德解释了正确的格式以使操作顺利运行调查结果：为了使这项工作正常工作，即$_POST工作 POST 方法，您需要在 header 中发送 application/x-www-form-urlencoded Content-Type。我不知道，但在 Content-Type 中发送数据是application/json行不通的。解决方案：1. SyntaxError: Unexpected token N =>这样做是因为在 PHP 脚本中，它必须在 中返回json_encode()，这就是为什么它No phone number found, N at 0th position在 else 脚本中的此语句中返回此错误。<?php&nbsp; &nbsp; include('/Applications/MAMP/htdocs/api/Requests/library/Requests.php');&nbsp; &nbsp; $request_method = $_SERVER['REQUEST_METHOD'];&nbsp; &nbsp; if ( $request_method == 'POST' ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(isset($_POST['phone_num'])){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;echo $_POST['phone_num'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo json_encode('No phone number found');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }else {&nbsp; &nbsp; &nbsp; &nbsp; echo json_encode('No defined function for this method. Please use POST only');&nbsp; &nbsp; }?>2. $_POST 不适用于 Angular 代码中的 POST 方法 =>已在上面解释。import { Component } from '@angular/core';import { HttpClient, HttpHeaders } from '@angular/common/http';export class AppComponent {&nbsp; message: string;&nbsp; url: string = 'xxxxxxx';&nbsp; customernum: number;&nbsp; httpOptions = {&nbsp; &nbsp; headers: new HttpHeaders({&nbsp; &nbsp; &nbsp; 'Content-Type': 'application/x-www-form-urlencoded'&nbsp; &nbsp; })&nbsp; };&nbsp; body: any = `phone_num=${this.customernum}`;&nbsp;&nbsp;&nbsp; constructor(private http: HttpClient){}&nbsp; callMe(){&nbsp; &nbsp; this.message = 'Please wait....'&nbsp; &nbsp; this.http.post(this.url, this.body, this.httpOptions).subscribe(&nbsp; &nbsp; &nbsp; response => console.log(JSON.stringify(response)),&nbsp; &nbsp; &nbsp; error => console.log(error)&nbsp; &nbsp; );&nbsp; }}如果您仍然遇到错误，那么您的角度代码中会有一些格式错误。请点击此链接。我希望这对你有帮助。我看到人们对使用非常严格$_POST[] in place of $_GET[]，但这Content-Type就是问题所在。

Answer 3

SyntaxError: Unexpected token N in JSON 意味着你有一些格式错误的 JSON，它通常是一个没有用引号括起来的字符串。1) 检查 this.customernum 是否不为空或不包含任何坏字符。2) 用双引号将 phone_num 括起来。

Answer 4

如果您使用的是表单而不是尝试直接从该表单添加值，而不是任何额外的变量。用您的表单名称替换此处的表单this.http.post(this.url, { 'phone_num': this.form.value.phoneForm}, this.httpOptions).subscribe(&nbsp; &nbsp; &nbsp; response => console.log(JSON.stringify(response)),&nbsp; &nbsp; &nbsp; error => console.log(error)&nbsp; &nbsp; );

Answer 5

传递原始对象{ 'phone_num': this.customernum }，不要使用JSON.stringify()试试这样：callMe(){&nbsp; &nbsp; this.message = 'Please wait....'&nbsp; &nbsp; this.http.post(this.url, { 'phone_num': this.customernum }, this.httpOptions).subscribe(&nbsp; &nbsp; &nbsp; response => console.log(JSON.stringify(response)),&nbsp; &nbsp; &nbsp; error => console.log(error)&nbsp; &nbsp; );&nbsp; }