使用 Axios 将对象从 React.js 发布到 PHP

Posted 2023-02-22

【中文标题】使用 Axios 将对象从 React.js 发布到 PHP

【英文标题】：Posting object from React.js to PHP using Axios

【发布时间】：2020-07-01 14:38:27

【问题描述】：

我正在尝试使用 React JS 作为前端和 php 作为后端来创建登录表单。我似乎无法弄清楚如何将表单的数据（电子邮件和密码）传递给 PHP 脚本。我尝试使用谷歌搜索，所有解决方案要么对我不起作用，要么数据不足。我正在使用 React v16。

这是我的前端代码：

import React,  useState  from 'react';

// libraries
import  Col, 
          Button, 
          Form, 
          FormGroup, 
          Label, 
          Input from 'reactstrap';
import Axios from 'axios'          


const App = () => 

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const submit = () => 
    Axios(
      method: 'POST',
      url: 'http://localhost:80/api/login.php',
      headers: 
        'Content-Type': 'application/json',
      ,
      data: 
        email,
        password
      
    )
    .then((response) => 
      console.log(response)
    )
    .catch((error) => 
      console.log(error)
    )
  

  return (
    <div>

      <Form>
        <FormGroup row>
          <Label for="exampleEmail" sm=2>Email</Label>
          <Col sm=10>
            <Input value=email onChange=e => setEmail(e.target.value) type="email" name="email" placeholder="email" />
          </Col>
        </FormGroup>

        <FormGroup row>
          <Label for="examplePassword" sm=2>Password</Label>
          <Col sm=10>
            <Input value=password onChange=e => setPassword(e.target.value) type="password" name="password" placeholder="password" />
          </Col>
        </FormGroup>

        <FormGroup check row>
          <Col sm= size: 10, offset: 2 >
            <Button onClick=submit>Submit</Button>
          </Col>
        </FormGroup>
      </Form>

    </div>
  );


export default App;

这是我的后端：

<?php

$data = json_decode(file_get_contents("php://input"));
echo "received data";
print_r("$data");

?>

现在，如果我查看 Chrome 检查器，它会说 Request Payload is email: "xxx", password: "xxx" 所以我知道我的前端正在尝试发送数据到login.php，但我不知道如何用PHP“捕捉”前端发送的数据。

我打算做的是：一旦login.php得到数据，它将返回数据的JSON对象和字符串"received data"返回到前端。

请帮我看看这个。我研究了一整天，仍然找不到解决方案。

仅供参考，我一直在尝试我可以在网上找到的所有解决方案，例如我试过这个：

let data = 
      email,
      password
    

let form = new FormData()
form.append('data', data)

Axios.post('http://localhost:80/api/login.php', form)
.then(...)
.catch(...)

后端将是：

$email = $_POST['email'];
$password = $_POST['password'];

但无济于事。

【问题讨论】：

请检查您的 API URL 是否正确？ URL: 'http://localhost:80/api/login.php 我认为端口缺少某些东西

@SanatGupta 是正确的。我在 Wamp 服务器上运行 login.php 并且端口确实是 80

【参考方案1】：

您好，请更换您的 PHP 代码，希望您能得到回复。

谢谢

<php
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
    header("Access-Control-Allow-Headers: Content-Disposition, Content-Type, Content-Length, Accept-Encoding");
    header("Content-type:application/json");
    $data = json_decode(file_get_contents("php://input"));
    echo "received data";
    print_r($data);
?>

【讨论】：

@Jonathan 请看一下答案，您只需要替换您的 PHP 代码，您就会得到回复。实际上，您需要允许 cors 域进行 API 访问。谢谢

所有头文件的作用是什么？

顺便说一句，它现在可以工作了。我现在从 login.php api 得到响应。非常感谢

所有标题都允许您请求的域

听起来不错，您的工作已经完成，请投票标记为答案，谢谢