Call php file with Angular4 and cli return page no

问题:

I'm using angular 4.0.0 instaled with angular-cli to create a simple application, but I keep getting a 404 File not found error when trying to call a PHP file.

Basically I'm starting the Angular using ng serve, which runs the application on http://localhost:4000 and I also have WAMP running, so I can use the php file to connect to a phpmyadmin and get data from a backend database.

I used to do it with Angular 1.5+ and it worked fine, but now I keep getting this error:

http://localhost:4000/api/server 404 (Not Found)

This is my folder structure:

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

If I try to call other url, for example, one that is online on an actual server, then it works as expected.

This is the file responsable for the http calls:

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

What am I doing wrong in here?

回答1:

Error it self explains the whole things

http://localhost:4000/api/server

Angular is trying to call api from localhost:4000 but it should be only localhost.

Please check your request url and make it http://localhost/api/server not http://localhost:4000/api/server

回答2:

This is what I have found to solve my issues when dealing with PHP and Angular.

Make sure you are appending the complete url in your request. If you are using a relative url, Angular will look for the file under localhost:4000 (in your case). So since your PHP is not running on the same, you need to append the complete url to the php-file:

http://localhost/possible_folder/name_of_php_file_here.php

Then you run into the cors issue. For me it has been enough to set the following line in the php-file:

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

Then you might need to enable CORS in your browser. For Chrome you can use the following extension.

I see that you have tried to set the headers in Angular, that is not the place, you need to append it on the PHP-side like we did above.

You should also set the headers content-type, so your post should look something like this:

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