I don't understand why my axios post request isn't working - 404 not found

Question

import React, {Component} from 'react';
import axios from 'axios';

export default class CreateDog extends Component {
    constructor(props){
        super(props)

        this.state = {

            name: '',
            activityLevel: '',
            description: ''
        }
        this.newDog = this.newDog.bind(this)
    }

newDog() {

    var doggy = {
        name: this.state.name,
        activityLevel: this.state.activityLevel,
        description: this.state.description
    }

     axios.post('http://localhost:3002/api/createdog', doggy)
        .then(response => {
            console.log("sent successfully")
        })
    }

render(){
    return(
        <div>
            <div>
                <textarea type="text" placeholder="dog breed name" onChange={(e) => this.setState({name: e.target.value})}> </textarea>
                <textarea type="text" placeholder="dog breed activity level" onChange={(e) => this.setState({activityLevel: e.target.value})}> </textarea>
                <textarea type="text" placeholder="dog breed description" onChange={(e) => this.setState({description: e.target.value})}></textarea>
            </div>

            <div>
                <button onClick={() => this.newDog()}></button>
            </div>
        </div>
    )

}

I have an axios post request in the newDog function.

Here is my endpoint in node with the massive connection string.

massive(config.dblink).then(db => {
    app.set('db', db)
})
app.post('/api/createdog', dc.createDog);

controller:

module.exports = {
createDog: (req, res) => {
    const {name, activityLevel, description} = req.body;

    req.app.get('db').create_dog([name, activityLevel, description])
        .then(dog => {
            console.log(dog)
            res.status(200).send(dog);
        }).catch(err => {
              res.status(500).send(err)})
    }
}

SQL query

INSERT INTO dogBreed (name, activity_level, description)
VALUES
('English Bulldog', 'super lazy', 'English bulldogs are super lazy but 
adorable')
returning *;

I have been looking at this for days and it appears to match all of the examples I am trying to follow. Please help. Sorry for the code overload.

Here is the error I am getting:

POST http://localhost:3002/api/createdog 404 (Not Found)

Solution 1

I believe the error is because you are using the full URL in this call:

axios.post('http://localhost:3002/api/createdog', doggy)

Instead try using a relative path:

axios.post('/api/createdog', doggy)

If this doesn't work don't forget to add the project name before /api:

axios.post('/projectName/api/createdog', doggy)

This solved it for me.

Solution 2

I had a similar problem and after debugging, it is fixed by adding e.preventDefault() when submitting the form:

handleSubmit = (e) => {

         e.preventDefault()
...

}

Comments

[yuantonito]

When you have a 404 http status error code, it means that the API / route/ link does not exist or work. Are you sure you launched your local API ?

[ScaryBelles]

My server says that it's running. I'm starting to think it has to do with the SQL/database stuff?

[yuantonito]

Not possible that it is SQL/database stuff. The problem can only comes from the API. If it would come from the SQL stuff and had an error, you would have an 500 error code instead of 404. Can you call your API from Postmanor something like that just to test the API ?

[ScaryBelles]

It stands for 'dogController'. This is the function that should be getting called within the dogController: module.exports = { createDog: (req, res) => { const {name, activityLevel, description} = req.body; req.app.get('db').create_dog([name, activityLevel, description]) .then(dog => { console.log(dog) res.status(200).send(dog); }).catch(err => { res.status(500).send(err)}) } }

[ScaryBelles]

when I try using postman, this is what I get. { "name": "error", "length": 107, "severity": "ERROR", "code": "42P01", "position": "15", "file": "parse_relation.c", "line": "1160", "routine": "parserOpenTable" }

[yuantonito]

Arg, that's strange then. With postman, do you have a 404 error or a 500 error ? It means your API is correctly launched but there is an error in the code. However it shouldn't display a 404 error. I might have talked too soon :)

[ScaryBelles]

It has been through a 500 error as well - depending on what changes I make. So a 404 means that there's a problem with the endpoint, and 500 might lead more to the SQL? For some reason pgAdmin is saying that I do not have a dogBreed table in my database, but I definitely do, and there are no spelling/capitalization errors.

[yuantonito]

Yes that's exactly what you just said. You should debug the API first and call it from Postman before testing with React, it would be easier for you ! If you have encounter a problem again, I'll be happy to answer it in your new question :)