Angular 2中http.get方法调用后端接口失败求助

我一眼就看到了几个关键问题，咱们逐个解决：

1. 核心错误：错误嵌套了Observable #

你的testFunc()里用of()把http.get()的结果包起来了，但http.get()本身就返回一个Observable，用of()包裹后，你返回的是Observable<Observable>——也就是一个嵌套的Observable。这会导致两个直接问题：

• 内部的HTTP请求根本没被订阅执行，所以后端完全收不到请求，日志自然没触发；
• 你订阅时拿到的是内部的Observable对象，所以打印出来是[object Object]。

修复这个问题： #

直接返回http.get()的结果，去掉of()包裹：

// hero.service.ts 中的 testFunc() 修改为：
testFunc() {
  console.log("Test func is being called in the service");
  // 注意要加完整的协议头，否则会被当成相对路径
  return this.http.get('http://localhost/pokemon/ajax.php?method=getTypes');
}

2. URL路径问题 #

你原来写的localhost/pokemon/ajax.php是相对路径，Angular会把它解析成http://localhost:4200/localhost/pokemon/ajax.php，这显然不是你要的后端地址。必须加上完整的http://协议头，或者用代理配置（后面会说）。

3. 跨域请求问题 #

你的Angular项目跑在localhost:4200，后端在localhost（默认Apache端口是80），属于不同端口，浏览器会拦截跨域请求。这里有两种解决方式：

方式一：后端PHP添加CORS头 #

在你的ajax.php最开头添加以下代码，允许来自Angular端口的跨域请求：

header("Access-Control-Allow-Origin: http://localhost:4200");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
// 如果需要携带Cookie，还要加上：
// header("Access-Control-Allow-Credentials: true");

方式二：使用Angular代理配置（更推荐，避免后端修改） #

在项目根目录创建proxy.conf.json文件，内容如下：

{
  "/pokemon/*": {
    "target": "http://localhost",
    "secure": false,
    "changeOrigin": true
  }
}

然后修改angular.json中serve的配置，加上代理文件路径：

// 找到 projects -> [你的项目名] -> architect -> serve -> options
"options": {
  "browserTarget": "your-project-name:build",
  "proxyConfig": "proxy.conf.json" // 添加这一行
}

之后重启Angular服务，现在你可以用相对路径发起请求了：

// hero.service.ts 中的 testFunc() 可以改成：
return this.http.get('/pokemon/ajax.php?method=getTypes');

验证修复 #

修改后，你的heroes.component.ts中的订阅就能拿到正确的后端返回数据了，后端的日志也会正常触发。如果还有问题，可以打开浏览器的开发者工具（F12），在Network标签下查看请求的状态和详细信息，排查是否还有路径或跨域问题。

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