如何使用 API 在 React Js 中通过 PHP 获取 Mysql 表数据？答案

【问题标题】：How to fetch Mysql table data through PHP in React Js using API?如何使用 API 在 React Js 中通过 PHP 获取 Mysql 表数据？
【发布时间】：2020-10-24 21:12:34
【问题描述】：

我在 localhost:3000 上使用 react js，我在 localhost:8080 上使用 PHP，现在我想通过 AXIOS API 将 mysql 表数据获取到名为 DataandForm.jsx 的 react js 页面。我有一个 PHP 页面 index.php，我在其中获取在 localhost:8080/data/index.php 上运行的 MYSQL 表行，现在如何使用 AXIOS 将 index.php 中可用的数据带到 DataandForm.jsx？

DataandForm.jsx

import React from 'react'

class DataandForm extends React.Component{
    constructor()
    {
        super()
        this.state={
            row:[]
        }
    }

    componentDidMount()
    {
        const axios = require('axios');

        // Make a request for a user with a given ID
        axios.get('http://localhost:8080/data/index.php')
          .then( response =>{
            // handle success
            console.log(response);
            this.setState({row:response.data});
          })
          .catch(function (error) {
            // handle error
          console.log(error);
          })
          .then(function () {
            // always executed
          
          });
        
    }
    
    render()
    {
        return(

<div className="container">
    <div className="row">

        <div className="col-sm-6">
           {this.state.row.map(datum=> 
            <div className="row">
                <div className="col-sm-4">key={datum.id}</div>
                <div className="col-sm-4">data1={datum.data1}</div>
                <div className="col-sm-4">data2={datum.data2}</div>
            </div>


            
            )}
        </div>

    <div className="col-sm-10 offset-sm-2"><br/>

<form class="form-inline" action=" " method="post" >
<div class="form-group">
  <label for="email">FIRSTNAME:</label>
  <input type="text" name="data1" class="form-control" id="email" />
</div>
<div class="form-group">
  <label for="pwd">LASTNAME:</label>
  <input type="text" name="data2" class="form-control" id="pwd" />
</div>
 
<button type="submit" class="btn btn-danger">Submit</button>

</form>

</div>
    </div>
</div>

        )
    }
}
export default DataandForm

index.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydata";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}



$sql = "SELECT * FROM datum";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    echo "DATA1: " . $row["data1"]. " - DATA2: " . $row["data2"]. "<br>";
  }
} else {
  echo "0 results";
}

?>

在这里，我有一个 index.php 页面，它只从表中获取一些行并在 http://localhost:8080/data/index.php 上运行。我还有一个 DataandForm.jsx 文件，它试图使用 AXIOS api 从 PHP 文件中获取数据。

我想从表中获取行以通过 php 使用 api 调用来响应前端。我应该将提取行设置为 json 然后做出反应吗？我怎样才能做到这一点？

【问题讨论】：

我相信您可能遇到过 CORS 问题。
当你发布一堆代码时，让我们知道你运行它时实际发生了什么总是有帮助的。你的console.log(response) 给了你什么？你得到预期的结果（你在 PHP 中输出）？浏览器控制台有错误吗？
DatafromForm:1 从源“localhost:3000”访问 XMLHttpRequest 在“localhost:8080/data/index.php”已被 CORS 策略阻止：请求中不存在“Access-Control-Allow-Origin”标头资源。这是控制台中显示的错误
这能回答你的问题吗？ No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
不，我是 API 新手。我从 json 占位符中获取了一些数据，没有任何问题。这里我没有使用任何 JSON 。我知道我做错了，但我不知道该怎么办。

标签： php reactjs axios

【解决方案1】：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE,PATCH,OPTIONS');

把它放在你的 PHP 文件的顶部以避免 cors 问题..

【讨论】：