Ajax ReactからPHPファイルへの呼び出し - 場所を知らない

Question

非常に基本的なログインページを作成しています。私はphpを使ってユーザーログインを確認しようとしています。ここで私はPHPファイルにアクセスするために使用しているコードです。

axios.post("login.php", { 
    user: 'Fred', 
    pass: 'Flintstone' 
    }) 
    .then(function (response) { 
    console.log(response); 
    }) 
    .catch(function (error) { 
    console.log(error); 
    }); 

PHPファイルは、反応するアプリケーションのsrcフォルダ内にあります。私は電話をかけるとき

── src 
    │   ├── components 
    │   │   ├── BrowsePage 
    │   │   │   ├── BrowsePage.css 
    │   │   │   ├── BrowsePage.js 
    │   │   │   └── default.jpg 
    │   │   ├── CreatePage 
    │   │   │   ├── CreatePage.css 
    │   │   │   └── CreatePage.js 
    │   │   ├── Header 
    │   │   │   ├── Header.css 
    │   │   │   └── Header.js 
    │   │   ├── LoginPage 
    │   │   │   ├── LoginPage.css 
    │   │   │   ├── LoginPage.js 
    │   │   │   └── logo.svg 
    │   │   ├── ProfilePage 
    │   │   │   ├── ProfilePage.css 
    │   │   │   └── ProfilePage.js 
    │   │   └── RecPage 
    │   │    ├── default.jpg 
    │   │    ├── RecPage.css 
    │   │    └── RecPage.js 
    │   ├── index.css 
    │   ├── index.js 
    │   ├── login.php 
    │   └── registerServiceWorker.js 

それは

xhr.js:178 POST http://localhost:3000/login.php 404 (Not Found) 

PHPのドキュメントへの電流経路が動作しない、と私は仕事をしようとした他のどれをログに記録します。このphpドキュメントへのaxios呼び出しを行うためのパスは何ですか？

Answer 1

Reactアプリケーションが特定のhttp要求をプロキシできるように、サーバーをローカルに設定する必要があります。このサーバはlogin.phpスクリプトを実行し、ユーザ名/パスワードを認証します。 は、package.jsonのproxyの値を探し、に、api/foobarへのコールを、バックエンドの実行が宣言されている場所に転送するように指示します。あなたのpackage.jsonで

追加：

は

"proxy": "http://localhost:8000" 

これは次に、この

axios.post("/api/login", ..., ...).then() 

次のように見えるためにあなたのaxiosコールを変更http://localhost:8000/api/login

にhttp://localhost:3000/api/loginに行われた要求を転送するように反応するよう指示しますPHPサーバをhttp://localhost:8000で実行し、01へのPOSTリクエストを処理するようにサーバアプリケーションを設定する必要があります。

私はPHPの人ではありませんが、私はLaravelがうまく動作すると聞いています。あなたのPHPバックエンドが完全に独自のディレクトリにあった方が簡単です。