使用HttpClient调用PHP脚本

我试图通过一个简单的测试从angular 4应用程序调用一个php脚本，但我无法让它工作

脚本位于assets/php/test.php中，包含以下代码，通过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());
}

?>

get请求工作并加载test.php，它抛出一个错误，因为它无法读取它（但这并不重要，因为我不想执行这个脚本，也不想读取它，所以它只告诉我路径是正确的）

但是post请求告诉我它甚至无法到达文件，它应该在其他地方吗？还是我使用了错误的模块

以下是控制台错误：

Angular正在开发模式下运行。调用enableProdMode（）以启用生产模式。
js:1020错误HttpErrorResponse{headers:HttpHeaders，状态：200，状态文本：“OK”，url:http://localhost:4200/assets/php/test.php，ok:false，…}错误：{错误：语法错误：JSON中位置0处的意外标记<
在Object.parse（）处
在XMLHt…，text:“您正在向运行您的Angular project的服务器发出请求，它能够在您的assets文件夹中找到test.php，因为那里有一个名为test.php的文件，您的服务器将其视为资产文件，就像图像文件一样，但在post请求的情况下，您的服务器没有任何响应，因此出现404错误。
如果您在windows上，请尝试安装WAMP；如果您在Mac上，请尝试安装LAMP，以便能够运行PHP文件。您不能以尝试的方式使用PHP代码

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

不要忘记为跨域添加PHP代码头。

也许它有帮助，就像它帮助了我一样：

找不到该文件。PHP是一种解释语言，这意味着你需要使用解释器。类似于mod_PHP。你也可以使用http，这表明你需要将你的PHP置于http服务器下。你这样做了吗？你的PHP文件没有被处理，如果他能够在该服务器上成功地对同一文件发出GET请求，那么它将被视为文本文件服务器，这意味着它正在工作的http服务器。但是，您的angularjs http.post方法看起来很奇怪。帖子不应该包含一些要发布的数据吗？我在本地使用wampserver，正如我所说的，它通过url正确运行，我没有任何数据要发布，因为脚本不需要来自客户端的任何内容。我认为这是因为您的php代码没有设置为处理POST请求。如果请求是POST，它需要知道该做什么。如果是get，您的Web服务器会自动执行该操作。如果是POST，php需要处理它。但是代码没有说明响应什么，所以它是404。我使用的wamp angular和wamp都运行包含站点的同一文件夹。因此HttpClient.POST不是POST r是否从表单中请求？请将您的代码更改为我在回答中添加的代码。实际上是这样，但它起了作用。谢谢：）
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

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

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