php - Angular 6 HttpClient 和 PHP 错误 (unknown url) : 0 Unknown Error 的 Http 失败响应

Question

我在 Angular 6 中有以下身份验证和登录服务:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})

export class AuthApiService {
  public credentials:any=[];
  constructor(private http: HttpClient) { }


  login(username, password)
  {
    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/json');
    headerOptions.append("authorization", "basic aGM0YXBwOmHjddP5NjU=");
    let test = {user: username, pass: password};
    this.credentials = JSON.stringify(test);
    console.log("hi "+ this.credentials);
    return this.http.post('https://127.0.0.1/api/scripts/login.php', this.credentials, {
      headers: headerOptions
    }).pipe(map(
        res=>{
          console.log(res)
        },
        err=>
          console.log(err)
      ))
  }
}

当我点击登录按钮时:

a id="btn-login"  (click)="login()" class="btn btn-success">Login </a>

login.component.ts 中的一个函数将执行身份验证服务的登录函数:

login(){
    this.auth.login("a", "p").subscribe(
      (data)=>{
        console.log(data)
      },
      (error)=>{
        console.log(error)
      }
    )
}

在 php 中，对于 url，我在浏览器中运行它，我可以正确地看到结果 1，但是当我点击按钮时控制台出现错误:

"Http failure response for (unknown url): 0 Unknown Error"

在网络选项卡上:

PHP 脚本:

让我们从主类开始:

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');
header('Access-Control-Allow-Headers: *');

error_reporting(E_ALL);

class api {
    private $username ="...";
    private $password ="...";
    private $db="...";
    private $host = "...";

    public $conn;

    //Connection

    public function connection(){
        try{
            $this->conn = new PDO("mysql:host=$this->host;dbname=$this->db", $this->username, $this->password);
            $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $this->conn->exec("SET CHARACTER SET utf8");

            return $this->conn;
        }
        catch(PDOException $e){
            return $e->getMessage();
        }

    }

    //Login

    public function login($conn, $user){
        $login = "SELECT username FROM login WHERE username=:user LIMIT 1";
        $execLogin = $this->conn->prepare($login);
        $execLogin->bindValue(":user", $user);
        $execLogin->execute();
        $res = $execLogin->rowCount();

        return $res;
        // if($res>0)
        // {
        //     return json_encode($res);
        // }
        // else{
        //     echo 0;
        // }
    }

}

?>

然后，执行登录函数(https://127.0.0.1/api/scripts/login.php):

<?php
header('Content-Type: application/json');

require_once('../api.php');

//Getting username and password from Ionic
$user="brital";
$pass = json_decode($_POST['credentials']);

$newApi = new api();
$conn = $newApi->connection();
$res = $newApi->login($conn, $user);
echo $res;
?>

Answer 1

看起来您使用的是 https，我猜这是一个自签名证书？那么它可能与此处提到的问题相同:angular and self-signed SSL cert - ERR_INSECURE_RESPONSE

Ionic/Angular 的“0 未知错误”可能有很多原因。正如另一条评论所提到的，这可能是一个 CORS 问题，但您似乎已经正确设置了 header 。

您可以通过直接在 Chrome 中浏览 URL(在您的例子中为“https://127.0.0.1/api/scripts/login.php”)来确认这是一个证书问题。您是否收到错误“NET::ERR_CERT_AUTHORITY_INVALID”？

(临时)解决方案如链接中所述 - 继续使用不安全选项，以便 Chrome 记住接受您的自签名证书。正确的做法当然是使用真实的证书。