从php到Angular页面接收数据时，解析login.php错误时Http失败

Question

一直在尝试使用PHP(后端(和Angular(前端(制作一个简单的登录页面

这是我的登录信息service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams} from '@angular/common/http';
import { User } from '../shared/user.model';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators'
import { environment } from 'src/environments/environment';
@Injectable({
providedIn:'root'
})

export class LoginService{
loggedUser: User;
constructor(private http: HttpClient){}
loginUser(username:string, password:string){
const body = {
'username':username,
'password':password
}
const user = JSON.stringify(body);
console.log(user);
return this.http.post(
environment.url+'login.php',
user,
{responseType: 'text'}
).pipe(map((res) => {
console.log(res);
return res;
}),(err) =>{
catchError(this.handleError);
console.log(this.http.post);
return err;
}
);
}
handleError(errorResponse:HttpErrorResponse){
console.log(errorResponse);
return throwError("Something Went Wrong");
}

}

登录组件与网页交互：

import { Component, OnInit } from '@angular/core';
import { LoginService } from './login.service';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private loginService:LoginService, private router: Router) { }
onSubmit(form: NgForm){
console.log("button clicked");
if(form.invalid){
return;
}
const username = form.value.username;
const password = form.value.password;
let authObs: Observable<any>;
authObs = this.loginService.loginUser(username,password);
authObs.subscribe(
resData => {
console.log(resData);
this.router.navigate(['/calibration']);
},
errorMessage => {
console.log(errorMessage);
}
);
}
ngOnInit(): void {
}  
}

login.php

<?php
session_start();
require_once("connection.php");
$data = file_get_contents('php://input');
$obj = (array)json_decode($data);
try  
{  
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);  
if(isset($data))  
{     
$query = "SELECT * FROM user_master WHERE username = :username AND password = :password";  
$statement = $conn->prepare($query);
$statement->bindParam(':username', $username);
$statement->bindParam(':password', $password);
$username = $obj["username"];
$password = $obj["password"];
$statement->execute();
$count = $statement->rowCount();
if($count > 0)  
{  
//echo "success"; 
echo $username."-".$password; 
return json_encode($statement);
//header("location:login_success.php");  
}  
else  
{  
$message = '<label>Wrong Data</label>';  
echo "failure";
return;
}  
}
}  
catch(PDOException $error)  
{  
$message = $error->getMessage();  
}
?>

尽管PHP页面运行成功，但我在解析过程中遇到了"Http失败"。我已经尝试了这里提到的解决方案：

Angular 8错误：解析Http 时Http失败

但这个问题仍然存在。

编辑：这是我收到的回复：

error: {
error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
text: "admin-admin"
<prototype>: Object { … }
}
headers: {
lazyInit: function lazyInit()​
lazyUpdate: null
normalizedNames: Map(0)
​​    <prototype>: Object { … }
}
​
message: "Http failure during parsing for http://localhost/calibration/login.php"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost/calibration/login.php"
login.component.ts:37:16

Answer 1

所以我通过添加解决了这个问题

header('Content-Type: text/plain');

在PHP脚本的顶部。