Angular2アプリからPHPに投稿すると404エラーが表示されるのはなぜですか？

Question

PHP（動作する可能性がありますが、まだテストされていません）を除き、以下のコードはすべて動作しているようです。私の問題は、localhostサーバー上のPHPファイルにアクセスしようとすると404エラーが発生することです。

私はLITE-Serverを使用していますが、私はまた、問題は、サーバー自体とあったかどうかを確認するためにXAMPPを使用してみましたが、私は404

を得るどのような場合には、私も絶対との両方を使用して試してみました私のポストリクエストと無用の相対URL。 Chromeデベロッパーツールの[ネットワーク]タブの投稿のヘッダーを確認すると、データが予想どおりに表示され、データが投稿されます。

ブラウザでPHPファイルを見つけることができないのはなぜですか？

マイコード

フォームコンポーネント：

constructor(private fb: FormBuilder, private databaseService : DatabaseService) {  

    this.quoteForm = fb.group({ 
     'firstName': [null, Validators.required,], 
     'lastName': [null, Validators.required], 
     'email': [null, Validators.required], 
     'phone': [null, Validators.required], 
     'company': [], 
     'country': ['United States'], 
     'address1': [], 
     'address2': [], 
     'city': [], 
     'state': [""], 
     'zip': [], 
     'prefContact': [""], 
     'referral': [""], 
     'queryType': [""], 
     'companyType': [""], 
     'message': [null, Validators.required] 
    }); 
} 

onSubmit(value: Object) { 

    if(this.quoteForm.invalid) { 
     this.formValid = false; 
    } 
    else { 
     this.formValid = true;   
     this.submitted = true; 
     this.databaseService.postForm(value) 
          .subscribe(
           data => value, 
           error => this.errorMessage = <any>error 
          ); 
    } 
} 

投稿サービス

private _url: string = "/db/quote-form.php"; 

constructor(private _http: Http) {} 

postForm(data: any) { 
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); 
    let options = new RequestOptions({ headers: headers }); 
    let body = JSON.stringify(data); 

    return this._http.post(this._url, body, options) 
          .map(this.extractData) 
          .catch(this.handleError) 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || {}; 
} 

private handleError(error: Response | any) { 
    let errMsg: string; 
    if(error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 

    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 

PHP：

header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: X-Requested-With'); 
header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); 

$formData = json_decode(file_get_contents('php://input')); 

foreach ($formData as $key=>$value) { 
    $_POST[$key]=$value; 
} 

$formObject = $_POST['firstName']; 
$formObject = $_POST['lastName']; 
$formObject = $_POST['email']; 
$formObject = $_POST['phone']; 
$formObject = $_POST['company']; 
$formObject = $_POST['country']; 
$formObject = $_POST['address1']; 
$formObject = $_POST['address2']; 
$formObject = $_POST['city']; 
$formObject = $_POST['state']; 
$formObject = $_POST['zip']; 
$formObject = $_POST['prefContact']; 
$formObject = $_POST['referral']; 
$formObject = $_POST['queryType']; 
$formObject = $_POST['companyType']; 
$formObject = $_POST['message']; 
$formObject = $_POST['images']; 

echo $formObject['firstName']; 

ちなみに、GETリクエストは動作しますが、POSTは動作しません。

Answer 1

確かに私はXAMPPサーバーが正しく動作しているため、XAMPPサーバーを適切にテストしませんでした。 Lite-Serverは本質的にPHPを実行するように設定されていないので、PHPファイルは通常のテキストとして扱われます。私はそれが振り返って明白な何かであることを知っていた。あなたは（LITE-Serverのような）ローカルサーバーを使用していて、PHPに投稿する必要が角度のアプリを構築している場合

：だから、同じような問題に引っかかって貧しい人々のためにそれを合計する

ファイルがバックエンドにありますが、あなたの投稿が404エラーを返している場合、問題はサーバー自体の可能性が高いです。 XAMPPのようなものに切り替えるか、Lite-ServerにPHPをコードとして実行させる方法を見つけてください。

TypeScriptを自動的にJSS（TSCなど）に変換するサービスを開発環境内で使用している場合は、ローカルサーバーを実行しているXAMPP（または同等のもの）を持っている間もファイルを監視して変換できます。 Lite-ServerでTSCを同時に実行していたので、私のpackage.jsonを編集しなければなりませんでした。

この問題は、今までAngular2を使用していた中で最も苦痛で困難なものでした。私はそれがドキュメントの必要性が非常に高いと感じています。