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

Im creating a very basic login page and i'm trying to use php to verify the user login. Here is the code I'm using to access the php file.

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

The PHP file is located within the src folder of the react app.

  ── 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

When I make the call it logs

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

The current path to the php document does not work, and none of the others I've tried work. What is the path to make an axios call to this php document?

doule6314
doule6314 从172.22.94.194:3000/login页面,当我提出请求时,日志显示xhr.js:178POST172.22.94.194:3000/login.php404(NotFound)。我也在使用create-react-app
接近 3 年之前 回复
doutangkao2789
doutangkao2789 您必须配置React代码来代理运行login.php脚本的php服务器。您使用的是create-react-app还是手动配置webpack配置?
接近 3 年之前 回复
duanfei8399
duanfei8399 你目前如何提供这些文件?对不以/开头的路由的请求将尝试将其附加到当前url的路径并在那里发出请求。例如,在此页面上,如果您尝试向login.php发出请求,则会向https://stackoverflow.com/questions/47645434/login.php出请求。
接近 3 年之前 回复

1个回答



您需要在本地设置一个服务器,您的React应用程序可以代理某些http请求。 此服务器将运行您的login.php脚本并验证用户名/密码。 create-react-app </ code>在package.json中查找 proxy </ code>值,并告诉 webpack-dev-server </ code>转发对 api / foobar </ code>到你声明你的后端将要运行的地方。</ p>

在你的package.json中添加:</ p>

 “proxy”:“http:// localhost:8000”
</ code> </ pre>

这告诉React转发对 http:// localhost的请求 :3000 / api / login </ code>到 http:// localhost:8000 / api / login </ code> </ p>

然后修改你的axios调用看起来像这样< /p>
nn

axios.post("/api/login“,...,...)。then()
</ code> </ pre>

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

我不是一个PHP人,但我听说Laravel很高兴能与之合作。 如果您的PHP后端完全位于其自己的目录中会更容易。</ p>
</ div>

展开原文

原文

You'll need to setup a server locally that your React application can proxy certain http requests to. This server will run your login.php script and authenticate the username/password. create-react-app looks for a proxy value in your package.json and tells webpack-dev-server to forward any calls to api/foobar to wherever you have declared that your back-end will be running.

In your package.json add:

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

This tells React to forward requests made to http://localhost:3000/api/login to http://localhost:8000/api/login

Then modify your axios call to look like this

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

Next, you have to get your PHP server running on http://localhost:8000 and set up your server application to handle POST requests made to /api/login.

I'm not a PHP guy but I've heard Laravel is nice to work with. It would be easier if your PHP backend was in its own directory completely.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问