Question

我正在使用angular 4.0.0与angular-cli一起创建一个简单的应用程序，但在尝试调用PHP文件时，我一直收到404 File not found错误。

基本上我正在使用ng serve启动Angular，它在http://localhost:4000上运行应用程序并且我也运行WAMP，所以我可以使用php文件连接到phpmyadmin并从中获取数据后端数据库。

我曾经使用Angular 1.5+做它并且它工作正常，但现在我一直收到这个错误：

http://localhost:4000/api/server 404（未找到）

这是我的文件夹结构：

root
- src
 --api
 --app
 --assets
 // etc..

如果我尝试调用其他网址，例如，在实际服务器上联机的网址，那么它会按预期工作。

这是http调用的文件：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class ApiService {
    constructor(
        private http: Http,
    ) { }

    apiGet() {
        return this.http.get(
            './api/server'
        ).map(response => response.json()).do(data => {
            // -
        }).catch(this.handleErrors);
    }

    apiPost(info: object) {
        const headers = new Headers();
        headers.append('Access-Control-Allow-Origin', '*');

        return this.http.post(
            './api/server',
            JSON.stringify(info),
            { headers }
        ).map(response => response.json()).do(data => {
            console.log( 'Response: ', data )
            // -
        }).catch(this.handleErrors);
    }

    handleErrors(error: Response) {
        console.log( 'Error: ', error )
        return Observable.throw(error);
    }
}

我在这里做错了什么？

Answer 1

错误它自我解释了整个事情

http://localhost:4000/api/server

Angular正试图从localhost:4000调用api，但它应该只是localhost。

请检查您的请求网址并将其设为http://localhost/api/server而不是http://localhost:4000/api/server

Answer 2

这是我在处理PHP和Angular时解决我的问题。

确保您在请求中附加完整的网址。如果您使用的是相对网址，Angular会在localhost:4000下查找该文件（在您的情况下）。因此，由于您的PHP没有运行，您需要将完整的URL附加到php文件：

http://localhost/possible_folder/name_of_php_file_here.php

然后你遇到了cors问题。对我来说，在php文件中设置以下行就足够了：

<?php
   header('Access-Control-Allow-Origin: *');
   // some have needed to add below line too...
   // header('Access-Control-Allow-Headers: Content-Type');   
   // ....
?>

然后您可能需要在浏览器中启用CORS。对于Chrome，您可以使用以下 extension 。

我看到你试图在Angular中设置标题，这不是地方，你需要像我们上面那样将它附加到PHP端。

您还应该设置标题内容类型，因此您的帖子应如下所示：

apiPost(info: object) {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http.post('http://localhost/.........', info, { headers })
      .map(response => response.json())
      .do(data => {
        console.log( 'Response: ', data )
       })
      .catch(this.handleErrors);
}

用Angular4调用php文件，找不到cli返回页面

2 个答案: