Question

我正在尝试使用AXIOS以API的形式从表中获取数据到React前端。我正在使用代理来获取数据，当文件位于远程服务器（http://auto-parts.oaccoman.com/test.php）上时，它可以正常工作。当我从本地（http：// localhost：81 / data / index.php）使用相同的数据时，它在控制台中显示了错误。

Error: Request failed with status code 404

DataandForm.jsx

import React from 'react'
 

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

    componentDidMount()
    {
        const axios = require('axios');
        
         
         const remote="http://auto-parts.oaccoman.com/test.php"
          

         const proxy="https://cors-anywhere.herokuapp.com/"
         const local="http://localhost:81/data/index.php"
        
        axios
          .get(proxy+local)
          .then( response =>{
            // handle success
            console.log(response);
         this.setState({row:response.data});
          
          })
          .catch(function (error) {
            // handle error
          console.log(error);
          })
          .then(function () {
            // always executed
          
          });

          setTimeout(prests=>{
           this.setState({
            logged:false.logged
           })
          }, 2500);

          
        
    }
    
    render()
    {
        return(

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

        {this.state.logged?'Loading Your Data...' : <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.name}</div>
                {/* <div className="col-sm-4">data2={datum.value}</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

http：// localhost：81 / data / 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);

$jsonarray= [];

if ($result->num_rows > 0) {
   
  while($row = $result->fetch_assoc()) {
     
    $jsonarray[]=$row;
  }
} else {
  echo "0 results";
}

 

 
 echo json_encode($jsonarray);
  

?>

Answer 1

如果不需要从本地主机访问代理（并且您知道为什么需要这样做），我想您可以确定是在本地运行还是在远程服务器中运行（通过某种配置），并且然后运行与此类似的内容：

let url
const proxy="https://cors-anywhere.herokuapp.com/"
const local="http://localhost:81/data/index.php"

if (runningLocally) // usually some way to determine a "development mode"
    url = local
else
    url = proxy + local

（这可以写得更短，我只是想清楚地这样做）

请求失败，状态代码为404，位于createError

1 个答案: