Angular 6和PHP SyntaxError：JSON中位于JSON.parse位置0处的意外标记()

Question

我有以下PHP类：

<?php

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

error_reporting(E_ALL);

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

    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;
        // }
    }

}

?>

在这个类中，我有两个主要功能，第一个是连接到服务器，另一个是登录。

然后，在Angular web应用程序中，如果用户添加了他的凭据，这些凭据将通过Angular 6的HttpClient发送到login.php脚本：

<?php
//header('Access-Control-Allow-Headers: *');
header('Content-Type: application/json');

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

//Getting username and password from Angular

$user="brital";
//$pass = json_decode($_POST['credentials']);

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

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('Access-Control-Allow-Origin', '*');
    headerOptions.append('Content-Type', 'application/json');

    let test = {"user": username, "pass": password};
    this.credentials = JSON.stringify(test),
    console.log("hi "+ this.credentials);
    return this.http.post('http://dev.local/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>

error：SyntaxError：Excurned token xmlhttprequest.onload(http:="" localhost:4200="" endor.js:28274:51)at="" oketask(http:="" olyfills.js:2742:36)在zone.push..="" ode_modules="" one.js="" ist="" one.js.zone.runtask(http:="" olyfills.js:2510:47)在zonetask.push..="" one.js.zonetask.js.zonetask.invoketask[as="" alzoneawarecallback（http:="" olyfills.js:3888:17)消息：“json中位置0处的意外令牌<”<="">

下面是一张截图：

在network选项卡中，我从login.php返回了一个错误：

注意：未定义索引：C:\wamp64\www\dev\scripts\login.php第8行中的凭据

如果您检查我的login.php，我已经注释了这一行，所以我不知道为什么会给我这样一个错误。

Answer 1

好吧，我找到了解决办法：

看来我应该添加以下标题：

headerOptions.append('Access-Control-Allow-Origin', '*');
headerOptions.append('Access-Control-Request-Headers', '*');
headerOptions.append('Content-Type', 'application/json');
headerOptions.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');

在Apache中，我们应该转到Apache services并检查headers_modules。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</IfModule>