Angular2：从 php 文件接收数据答案

【问题标题】：Angular2: receiving data from php fileAngular2：从 php 文件接收数据
【发布时间】：2017-03-06 09:54:45
【问题描述】：

所以我试图从 php 文件中获取 JSON 数据，但控制台显示此错误：

EXCEPTION: Unexpected token < in JSON

我刚刚通过 php 发送了一个简单的 json 数组，如下所示：

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

$res = [
    array(
        'title' => 'First task',
        'description' => 'skdfjsdfsdf',
        'done' => false,
    ),
    array(
        'title' => 'Second task',
        'description' => 'skdfjsdfsdf',
        'done' => false,
    ),
    array(
        'title' => 'Third task',
        'description' => 'skdfjsdfsdf',
        'done' => false,
    )
];

echo json_encode(array('tasks' => $res));

这是我的 php 文件的位置：

最后这是我的服务类：

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class TasksDataService {

  constructor(private http: Http) {}

  getTasks(){
     return this.http.get('http://localhost:4200/src/database.php')
     .map(res => {
         console.log(res.json());//--I get the error in this line
         var result = res.json().tasks;
         console.log(result);
         return result;
     });
  }

}

我真的为这个问题搜索了很多，并尝试了很多解决方案，但仍然遇到同样的错误！

【问题讨论】：

你必须运行 apache、nginx 或其他东西来服务 php。
我跑了！
我也试过这个命令 "php -S localhost:4200" 但是 angular 不再起作用了
是的，我就是这个意思。
确实如此。但这只是我在开发过程中使用的，因为在我看来这并不重要，因为它只是开发。准备部署时，您只需构建 Angular 2 项目并将 dist 文件夹的内容扔到您的 apache 服务器上，因此不再有问题 :)

标签： php angular

【解决方案1】：

您的 WAMP 托管在不同的域下，因此如果您尝试在 Angular 2 项目中添加 PHP 文件，它将无法工作。

快速简便的解决方案是......

您实际上会将 PHP 文件保存在该域（在您的情况下为 localhost）下，并对这些文件发出 http 请求，例如：http://localhost/file.php。这当然是一个跨域请求，因此您需要在 PHP 文件中添加相应的标头。根据我的经验，以下工作一直有效：

header('Access-Control-Allow-Origin: *');

当然跨域请求在这里不是最优的，但是由于这个问题在开发模式下存在，我没有发现它是一个问题。

这里可能还会出现另一个问题，即您需要在浏览器中启用 CORS。为此，chrome here 有一个很棒的扩展。

【讨论】：

【解决方案2】：

你不能直接提供 php，你需要 apache 服务器来执行（使用 xampp），并且 src 文件夹不是一个公共文件夹，你可以将模拟数据存储到 assets 文件夹。

【讨论】：

我正在运行 wamp。我也尝试了“php -S localhost:4200”，但 angular 不再运行！
对于 wamp 或 xampp，您需要将 php 文件放入 htdocs 文件夹不是吗？