Angular 8.3.20 HttpClient返回200 OK却请求失败求助

我刚仔细看了你的代码，问题其实出在后端响应的内容格式和一些细节错误上，虽然网络面板显示200，但Angular的HttpClient无法正确解析响应，所以触发了错误回调。

核心问题分析 #

你的后端代码在输出完JSON数据后，又额外输出了所有请求头的文本内容：

echo $myJSON;
echo PHP_EOL;
foreach (getallheaders() as $name => $value) {
    echo "$name: $value\n";
}

这导致响应体变成了「JSON字符串 + 一堆非JSON的文本」，比如：

{"name":"Test Product","qty":30,"sku":"test-p"}
Host: localhost
Connection: keep-alive
...（其他请求头内容）

HttpClient默认会尝试把响应解析为JSON，遇到后面的非JSON内容时自然会解析失败，虽然HTTP状态码是200，但解析错误会触发error回调。

另外你的后端代码还有几个语法和配置错误，也可能影响请求：

1. CORS头的语法错误：header('Access-Control-Allow-Origin', '*'); 应该用冒号分隔键值，不是逗号
2. 未初始化$myObj：直接给$myObj->name赋值会触发PHP错误
3. 错误的CORS方法头：Access-Control-Request-Method是浏览器预检请求里的字段，后端应该用Access-Control-Allow-Methods来声明允许的请求方法

修复步骤 #

1. 修正后端代码

修改你的api/product-search.php，确保响应是纯JSON，同时修复CORS和变量初始化问题：

<?php
// 修复CORS头语法，使用冒号分隔
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Content-Type");
// 替换错误的Request-Method为Allow-Methods
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
Header("Access-Control-Allow-Headers: Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
header('Content-type: application/json');

// 初始化对象，避免PHP报错
$myObj = new stdClass();
$myObj->name = "Test Product";
$myObj->qty = 30;
$myObj->sku = "test-p";

// 如果需要调试请求头，可以把它加到返回的JSON对象里，而不是直接输出文本
// $myObj->requestHeaders = getallheaders();

$myJSON = json_encode($myObj);
echo $myJSON;

// 移除下面的文本输出，这是解析失败的关键
// echo PHP_EOL;
// foreach (getallheaders() as $name => $value) {
//     echo "$name: $value\n";
// }
?>

2. 简化Angular的请求头

你的Angular代码里手动添加了Access-Control-Request-Origin和Access-Control-Request-Headers，这些是浏览器在预检OPTIONS请求中自动发送的字段，不需要手动在GET请求里设置，反而可能干扰正常请求。简化setHttpHeader方法：

private setHttpHeader() {
  // GET请求如果没有发送请求体，Content-Type也可以省略，HttpClient会自动处理
  const headers = new HttpHeaders()
    .set('Content-Type', 'application/json');
  return { headers: headers };
}

验证修复 #

修改完成后，重新启动后端和Angular项目，发起请求应该就能正常解析JSON响应，控制台会输出正确的产品对象了。

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