0

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?

Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I imagined that, but I'm defining my url to call as simple as ./api/server. See the edited wuestion, I put the api service file there.
Thats the issue replace ./api/server with localhost/api/server and try again
Yes, it's kind of working but i'm getting cross-origin error now. Any idea how to solve this? I'm trying to find information about this.
its just one line code , add this line in your api file , header("Access-Control-Allow-Origin: *");
@celsomtrindade , as this answer solved your query will you please upvote it and accept it ?
|
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);
}
Improve this answer

9 Comments

When I don't use the chrome extension I get his error: No 'Access... Origin 'http://localhost:4000' is therefore not allowed access. And when using the chrome extension the error File Not Found appears again. I'm setting everything else like you said.
Well have you checked the file you are trying to make call to? Seems in your original question you are not referring to any php-file at all? :)
Yes I did. I just miss the file name on the question, but that would be server.php. If I generate the build from angular-cli and run it from the apache virtual host, then I can access it just fine. So I don't know what may be wrong with it.
Hmm. Sounds strange. It should work, this is how I do it myself :P so your php resides in http://localhost/api/server/server.php and that works just fine (meaning it does not throw 404 error) when you type that to browser? Well the cors issue is gone, but something else is going on. Strange that it works when you run it on apache host. I'm a bit baffled myself now, don't really know what is going on.
One thing I noticed is that, the PHP file is actually on the same localhost as angular. Both on :4000, only the database is in a different connection, which is :80 - PhpMyAdmin Wamp
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.