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)

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 ? — yuantonito, Oct 31 '17 at 22:15
My server says that it's running. I'm starting to think it has to do with the SQL/database stuff? — , Oct 31 '17 at 22:19
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 `Postman`or something like that just to test the API ? — yuantonito, Oct 31 '17 at 22:22
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)}) } } — , Oct 31 '17 at 22:23
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" } — , Oct 31 '17 at 22:28
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 :) — yuantonito, Oct 31 '17 at 22:33
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. — , Oct 31 '17 at 22:50
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 :) — yuantonito, Oct 31 '17 at 22:56

score 3 · Answer 1 · edited Aug 14 '18 at 17:38

3

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.

edited Aug 14 '18 at 17:38

ivcubr

1,988
9
20
28

answered Aug 14 '18 at 15:59

Klevin Doda

31
3

score 2 · Answer 2 · edited May 07 '19 at 06:02

2

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

handleSubmit = (e) => {

         e.preventDefault()
...

}

edited May 07 '19 at 06:02

TT.

15,774
6
47
88

answered May 07 '19 at 05:56

user11462840

21
1

score 0 · Answer 3 · answered Sep 12 '19 at 13:12

0

I was using the axios wrongly,

axios.get({ url:'' , method:''}).then

Meanwhile it is not right syntax to use .get() if params are passed as objects. so it becomes

axios({url:'your url' , method:'post'}

answered Sep 12 '19 at 13:12

eclat_soft

602
7
9

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

3 Answers3

Linked