php - Angular 2 : receiving data from php file

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;
     });
  }

}

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

Answer 1

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

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

您实际上会将 PHP 文件保存在该域(在您的例子中为 localhost)下，并对这些文件发出 http 请求，例如:http://localhost/file.php。这当然是一个跨域请求，因此您需要在 PHP 文件中添加适当的 header 。根据我的经验，以下方法一直有效:

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

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

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