Angular调用PHP后端API时JSON解析失败的解决方法咨询

你的PHP后端没有返回合法的JSON数据，反而输出了var_dump的调试文本，这导致Angular尝试解析非JSON内容时触发HTTP解析错误。从报错信息的error.text字段可以看到，实际返回的是PHP数组的打印内容，而非JSON字符串。

1. 修复PHP后端代码 #

修改list.php，移除var_dump，并确保输出JSON格式数据，同时设置正确的响应头：

<?php
include('connection.php');

// 设置响应头，明确告知客户端返回JSON格式
header('Content-Type: application/json');

$sql = "SELECT * FROM courses";
$data = $conn->query($sql);

$courses = [];
// 简化数组构建逻辑
foreach($data as $row) {
  $courses[] = [
    'courseId' => $row['courseId'],
    'courseName' => $row['courseName'],
    'coursePrice' => $row['coursePrice']
  ];
}

// 输出JSON字符串（必须用echo，否则不会返回给前端）
echo json_encode(['data' => $courses]);
?>

2. 验证PHP返回结果 #

访问http://localhost:9000/backend/list.php，应该看到纯JSON格式的响应：

{"data":[{"courseId":1,"courseName":"Angular","coursePrice":"850.00"},{"courseId":2,"courseName":"Javascript","coursePrice":"550.00"}]}

3. Angular代码无需修改 #

你的Angular服务(course.service.ts)中已经正确设置了responseType: 'json'，并且通过map操作提取res['data']，只要PHP返回合法JSON，就能正常解析数据并渲染。

内容的提问来源于stack exchange，提问作者Kelson Batista