Question

我正在创建一个非常基本的登录页面，并且我试图使用php来验证用户登录。这是我用来访问php文件的代码。

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

PHP文件位于react应用程序的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脚本并验证用户名/密码。 create-react-app在您的package.json中查找proxy值，并告诉webpack-dev-server将对api/foobar的任何调用转发到您声明后端将运行的任何位置。

在你的package.json中添加：

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

这告诉React将对http://localhost:3000/api/login的请求转发给http://localhost:8000/api/login

然后修改你的axios调用看起来像这样

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

接下来，您必须在http://localhost:8000上运行PHP服务器并设置服务器应用程序以处理对/api/login发出的POST请求。

我不是一个PHP家伙，但我听说Laravel很高兴能与之合作。如果您的PHP后端完全位于自己的目录中会更容易。

从React到PHP文件的Ajax调用 - 不知道位置

1 个答案: