Angular2: 从 PHP 文件接收数据

Question

我正在尝试从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;
     });
  }

}

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

- SlimenTN

---

在本地主机上，我该如何将其更改为在本地主机的4200端口上运行？ - SlimenTN

当我使用WAMP时，我让它在该域名下运行，并将php文件分开放置在该域名下。当然，这会变成CORS请求，但在开发过程中并不重要（在我看来）。因此，我只需在PHP端启用cors即可。 - AT82

抱歉，我没理解您的意思，您是指我将我的PHP文件放在本地主机下，并像这样在Angular中调用它：“http.get（'http：//localhost/file.php'）”吗？ - SlimenTN

是的，那就是我的意思。 - AT82

这是真的。但这只是我在开发过程中使用的，因为在我看来这并不重要，因为这只是开发。当准备部署时，您只需构建Angular 2项目并将dist文件夹的内容放在您的Apache服务器上，因此不再有这个问题 :) - AT82

Answer 1

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

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

实际上，您应该将PHP文件保留在该域名下（在您的情况下为localhost），并像这样对这些文件进行http请求：http://localhost/file.php。当然，这是一个跨域请求，因此您需要在PHP文件中添加适当的标头。根据我的经验，以下内容可行：

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

当然，跨域请求在这里并不是最佳选择，但由于这个问题存在于开发模式中，我并没有发现它是一个问题。

另外可能会出现的问题是，您需要在浏览器中启用CORS。对此，Chrome浏览器有一个很好的扩展程序在这里。

- AT82

Answer 2

你不能直接运行PHP，需要Apache服务器来执行（使用xampp），src文件夹不是公共文件夹，可以将模拟数据存储到assets文件夹中。

- Babar Hussain

---

我已经运行了WAMP。我还尝试过“php -S localhost:4200”，但Angular不再运行！ - SlimenTN

对于wamp或xampp，您需要将PHP文件放入htdocs文件夹中，是吗？ - Babar Hussain