Request failed with status code 404 at createError

Question

I am trying to get data from a table as API with AXIOS to the React front end. I am Using a proxy to get the data and it works fine when the file is on the remote server ( http://auto-parts.oaccoman.com/test.php) . When I use the same data from the local (http://localhost:81/data/index.php) , it's showing the error in the console.

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);
  

?>

What is handling your http requests? It seems that whatever is serving http is responding that because it may just not find whatever you want. — Pipetus, Jul 07 '20 at 12:59
Also, is that `.get(proxy+local)` intended? why are you concatenating those two strings? — Pipetus, Jul 07 '20 at 12:59
.get(proxy+local) to add the URL to the proxy without that I was unable to access even the remote URL. I read it from here https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe — kalecaliber, Jul 07 '20 at 13:04
So are you trying to serve a local resource by first going through a remote proxy? — Pipetus, Jul 07 '20 at 13:06
It's not clear for me why you would want to do that. Can you explain? You are trying to connect from your machine to another server that will try to connect back to your machine to get a resource. Why you can't just ask for the local resource? In any case, if the proxy is mandatory, it probably doesn't know how to serve for your local resource, and thus the 404. — Pipetus, Jul 08 '20 at 14:11
I have a CRUD application which is in PHP it's working fine. Now I wanted to make a front end react for that CRUD application, the task I want to do that is I have a form in the front end (React JS) on the same page I need to get the data from the database so on that page it has 2 rows. First row is fetching data from the MYSQL database and the 2nd row is the form to submit(insert) the data to the database. In the first row I was trying to fetch the table data with the help of AXIOS. That's where the error comes when I try to use http://localhost:81/data/index.php . I hope this is clear. — kalecaliber, Jul 09 '20 at 04:29
I hope this is the proper way to do that. Please suggest If anything else is better. — kalecaliber, Jul 09 '20 at 04:30
I'm still missing parts here, but as far as I know, it seems you're mixing a few concepts. Working on a local machine is different than working on an external server. If the error message you mention (the 404) is being shown in you browser console, then that means that the proxy is not able to find the thing you're asking for. Then it comes the second question: are you trying to make heroku hit your local machine? If so, I don't think that's a good approach. When working locally, it's not usual to have an external server hit your own computer (unless there's a very specific reason for that) — Pipetus, Jul 10 '20 at 22:19
I understand your point. As you said I have been using heroku, so what's the proper solution to access with the local server? — kalecaliber, Jul 12 '20 at 06:51
I added an answer to be more explicit, but also this could help you: https://stackoverflow.com/questions/47164330/axios-api-calls-in-heroku — Pipetus, Jul 13 '20 at 13:52

score 0 · Answer 1 · answered Jul 13 '20 at 13:48

If accessing the proxy from localhost is not necessary (and you know why you would need to do that), I guess you could just determine if you're running locally or in the remote server (by some kind of configuration) and then run something similar to this:

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

(this could be written even shorter, I'm doing it like this just to be clear)

Request failed with status code 404 at createError

1 Answers1