JSON中位置0的意外令牌< - 在Angular2应用程序中答案

【问题标题】：Unexpected token < in JSON at position 0 - in Angular2 applicationJSON中位置0的意外令牌< - 在Angular2应用程序中
【发布时间】：2017-11-03 20:47:52
【问题描述】：

我正在编写一个带有 php 后端的 Angular2 应用程序。当我从 Angular 应用程序向服务器发出请求时，它会在浏览器控制台中向我发送此错误消息。

Unexpected token < in JSON at position 0

我已阅读有关此问题的问题。他们说问题出在http 响应的响应类型上。他们说，响应类型应该是json。但在我的应用程序中，响应类型是 text/html。

这是与我的问题user.service.ts相关的service.ts文件

import { Injectable } from '@angular/core';
import {User} from '../models/user';
import {Http} from '@angular/http';

@Injectable()
export class UserService {

  private currentUser: User;

  constructor(private http: Http) {
    this.currentUser = new User(null, null, null, false);
  }

  getCurrentUser() {
    return this.currentUser;
  }

  logIn(username, password) {
    let curUser = new User(username, password, null, false);

    this.http.post('http://localhost/back_End/controllers/user.php/', {'username': username , 'password': password})
      .map(res => res.json())
      .subscribe(
        users => {
          curUser = users[0];
          console.log(curUser);
        }
      );
    console.log(curUser);
}

问题与logIn 方法有关。

这是对应的php文件user.php

<?php
$data  = json_decode(file_get_contents("php://input"));

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

$server_ame = "localhost";
$username = "root";
$password = "";
$dbname = "yathra";
$conn = new mysqli($servername, $username, $password, $dbname);

$sql = "select * from user where username='$data->username' and password='$data->password'";
$result = $conn->query($sql);
if($result->num_rows > 0) {
    $data = array();
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}else {
    echo "0 results";
}
echo json_encode($data);

$conn->close();
?>

我是 Angular2 的新手。有人可以给我一个解决方案吗？

【问题讨论】：

您的角度期待 JSON 响应，但在某些情况下您的 PHP 不会返回 JSON，例如echo "0 results";
除了前面的评论，听起来你从服务器得到的响应是 HTML，可能是 404 页面或其他页面。您应该能够打开开发人员工具并在网络选项卡中查看来自服务器的响应。如果该响应不是纯 JSON，它将不起作用。
如何在不解析的情况下查看来自服务器的原始数据？网络选项卡仅显示响应和请求的标头。 @Jason Spradlin
检查您的网络标签，点击请求，然后在“响应”标签中查看您收到的内容
顺便说一句，你正在回应两个回应......所以至少这是错误的。

标签： php json angular angular2-services

【解决方案1】：

您看到此错误是因为您尝试将文件解析为 JSON，但事实并非如此：

.map(res => res.json())

在运行 res.json 之前尝试记录您的响应，您会发现它是一个以 < 字符开头的非 JSON 文件（例如 php、XML、HTML 等）。

【讨论】：

怎么做？有没有办法查看响应中的原始数据？
.map(res => console.log(res))
对不起。但它不起作用。没有任何内容作为控制台输出打印。我不明白这段代码有什么错误。但是当我给这个console.log(this.http.post('http://localhost/back_End/controllers/user.php/', {'username': username , 'password': password})); 或console.log(this.http.post('http://localhost/back_End/controllers/user.php/', {'username': username , 'password': password}) .map(res => console.log(res))); 时。它打印一些名为 observable 的对象。
您是否忘记了“端口”，例如（localhost:4200/...）？所有 this.http.post 都是一个 Observable。如果 URL 错误，您会收到状态代码 404 - 或页面 - 尝试使用您拥有的 url 发送帖子 - 在导航器中使用开发人员工具，例如
尝试将其放入以帮助调试：this.http.post('http://localhost/back_End/controllers/user.php/', {'username': username , 'password': password}) .subscribe({ next: x => console.log('got value ' + x), error: err => console.error('something wrong occurred: ' + err), complete: () => console.log('done'), });

【解决方案2】：

你可以试试这个：

问题出在这里，因为你使用 json() 而不是 json

json() - 总是返回 json
json - 总是返回文本（可能是 HTML、PHP、XHTML 等）。

this.http.post('http://localhost/back_End/controllers/user.php/', {'用户名'：用户名，'密码'：密码}） .map(res => res.json) // 看这里。订阅（用户 => { curUser = 用户[0]; 控制台.log(curUser); } );

【讨论】：