CODEWITHSUNDEEP
phpangularhttpclient
bastien housiaux
bastien housiaux

Reputation: 19

Calling PHP scripts with Angular HttpClient

I'm trying to call a php script from an angular 4 app with a simple test but I can't make it work.

the scripts is located in assets/php/test.php and contains the following code which work when running it via the url :

<?php
try{
    $bdd=new PDO('mysql:host=localhost;dbname=musictools;charset=UTF8','root','');
    $bdd->exec('INSERT INTO gamme(nom) VALUES(\'mineure\')');
}catch(Exception $e){
    die($e->getMessage());
}

?>

without changing anything (except the import of HttpClientModule in app.module.ts) else I changed my app.component.ts like this to test :

import {HttpClient} from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private http:HttpClient){
      http.get('./assets/php/test.php').subscribe(data => {
        alert(data);
      });
      http.post("./assets/php/test.php",{}).subscribe(data => {
        alert(data);
      });
  }
}

the get request works and load the test.php which throw an error because it can't read it (but it doesn't matter because I wan't to execute this script not read it so It just tell me the path is correct).

but the post request tells me it can't even reach the file, should it be anywhere else ? Or am I using the wrong module?

Here are the console error :

console error

network

Angular is running in the development mode. Call enableProdMode() to enable the production mode.



core.es5.js:1020 ERROR HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/assets/php/test.php", ok: false, …}error: {error: SyntaxError: Unexpected token < in JSON at position 0
    at Object.parse (<anonymous>)
    at XMLHt…, text: "<?php
↵echo "a";
↵try{
↵    $bdd=new PDO('mysql:ho…ion $e){
↵    die($e->getMessage());
↵}
↵    
↵?>"}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure during parsing for http://localhost:4200/assets/php/test.php"name: "HttpErrorResponse"ok: falsestatus: 200statusText: "OK"url: "http://localhost:4200/assets/php/test.php"__proto__: HttpResponseBase
defaultErrorLogger @ core.es5.js:1020
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
next @ core.es5.js:4503
schedulerFn @ core.es5.js:3635
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:186
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:126
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
(anonymous) @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
onHandleError @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:495
invokeTask @ zone.js:1536
globalZoneAwareCallback @ zone.js:1562
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2975
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
(anonymous) @ zone.js:3008
proto.(anonymous function) @ zone.js:1382
(anonymous) @ http.es5.js:1822
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:132
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:129
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:112
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:87
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/filter.js.FilterOperator.call @ filter.js:60
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/map.js.MapOperator.call @ map.js:56
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
AppComponent @ app.component.ts:16
createClass @ core.es5.js:10912
createDirectiveInstance @ core.es5.js:10751
createViewNodes @ core.es5.js:12192
createRootView @ core.es5.js:12082
callWithDebugContext @ core.es5.js:13467
debugCreateRootView @ core.es5.js:12771
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9861
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4768
(anonymous) @ core.es5.js:4546
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:870
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
0 @ main.bundle.js:203
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
webpackJsonpCallback @ bootstrap 6bf8fac53f33cf5767e1:25
(anonymous) @ main.bundle.js:1
zone.js:2975 POST http://localhost:4200/assets/php/test.php 404 (Not Found)
scheduleTask @ zone.js:2975
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
(anonymous) @ zone.js:3008
proto.(anonymous function) @ zone.js:1382
(anonymous) @ http.es5.js:1822
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:132
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:129
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:112
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:87
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/filter.js.FilterOperator.call @ filter.js:60
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/map.js.MapOperator.call @ map.js:56
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
AppComponent @ app.component.ts:19
createClass @ core.es5.js:10912
createDirectiveInstance @ core.es5.js:10751
createViewNodes @ core.es5.js:12192
createRootView @ core.es5.js:12082
callWithDebugContext @ core.es5.js:13467
debugCreateRootView @ core.es5.js:12771
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9861
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4768
(anonymous) @ core.es5.js:4546
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:870
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
0 @ main.bundle.js:203
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
webpackJsonpCallback @ bootstrap 6bf8fac53f33cf5767e1:25
(anonymous) @ main.bundle.js:1
core.es5.js:1020 ERROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/assets/php/test.php", ok: false, …}error: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot POST /assets/php/test.php</pre>↵</body>↵</html>↵"headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure response for http://localhost:4200/assets/php/test.php: 404 Not Found"name: "HttpErrorResponse"ok: falsestatus: 404statusText: "Not Found"url: "http://localhost:4200/assets/php/test.php"__proto__: HttpResponseBase
defaultErrorLogger @ core.es5.js:1020
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
next @ core.es5.js:4503
schedulerFn @ core.es5.js:3635
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:186
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:126
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
(anonymous) @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
onHandleError @ core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:495
invokeTask @ zone.js:1536
globalZoneAwareCallback @ zone.js:1562
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2975
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
(anonymous) @ zone.js:3008
proto.(anonymous function) @ zone.js:1382
(anonymous) @ http.es5.js:1822
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:132
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:129
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:112
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:90
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:160
webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:87
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/filter.js.FilterOperator.call @ filter.js:60
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp.../../../../rxjs/operators/map.js.MapOperator.call @ map.js:56
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:157
AppComponent @ app.component.ts:19
createClass @ core.es5.js:10912
createDirectiveInstance @ core.es5.js:10751
createViewNodes @ core.es5.js:12192
createRootView @ core.es5.js:12082
callWithDebugContext @ core.es5.js:13467
debugCreateRootView @ core.es5.js:12771
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9861
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4768
(anonymous) @ core.es5.js:4546
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4546
(anonymous) @ core.es5.js:4508
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:870
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
0 @ main.bundle.js:203
__webpack_require__ @ bootstrap 6bf8fac53f33cf5767e1:54
webpackJsonpCallback @ bootstrap 6bf8fac53f33cf5767e1:25
(anonymous) @ main.bundle.js:1

could you help me?

Upvotes: 1

Views: 4290

Answers (2)

Mike
Mike

Reputation: 1

Don't forget to add to your PHP code header for cross domain.
Maybe it helps, as it helped me:

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

Upvotes: 0

Abdul Qadeer
Abdul Qadeer

Reputation: 372

You are making a request to server running you Angular project it is able to find test.php in your assets folder because there is a file named test.php there and your server treats it as an asset file, like an image file but in case of post request you server has nothing to respond with hence 404 error. Try installing WAMP if you are on windows or LAMP if you are on Mac to be able to run PHP files. You cannot use PHP code the way you are trying to.

http.post("http://localhost/assets/php/test.php",{}).subscribe(data =>     { 
 alert(data);
});

Upvotes: 1

Related Questions