My Axios call is returning a 404 error, React/Express

Question

I am using React and Express to try and post an Article to MongoDB after clicking a button.

**server.js**

app.use(express.static("public"));

app.post("/articles/:id", function(request, response){
    console.log(request.body);
});

and

**home.jsx**

addToFavorites = article => {
    console.log(article);
    this.state.savedArticles.push(article);
    this.setState(this.state.savedArticles);

    axios.post("/articles/" + article.id, {
        title: article.title,
        summary: article.summary,
        writer: article.writer,
        date: article.pub_date,
        url: article.link
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}

The console prints out the article so it is not undefined and the call catches the following error :

Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:78)

Reading other posts, people have mentioned that the path does not exist, but I'm not sure what that means.

Any help would be greatly appreciated :)

UPDATE :

My main issue was just that I did not run node server.js before yarn start. I am new to React so I did not know that this was important.

Including the proxy in package.json was also important.

Try with full path in axios.post like htpp://localhost:3000/articles/id here port is your backend service port number — Hemadri Dasari
– Hemadri Dasari, Commented Oct 12, 2018 at 4:39
in which ports are react and node running? are they the same? are you using a proxy? — c-chavez
– c-chavez, Commented Oct 12, 2018 at 9:35
@Think-Twice It still gave me a response of 404. Also just a question, but if I were to host this, wouldn't it cause another issue in the axios call? — Michael Kim
– Michael Kim, Commented Oct 12, 2018 at 21:51
@c-chavez Tried the proxy and to no avail, also the ports are the same. — Michael Kim
– Michael Kim, Commented Oct 12, 2018 at 21:53
@MichaelKim sorry but I ask again, in which port is your react app running and in which port is your node server running? — c-chavez
– c-chavez, Commented Oct 13, 2018 at 9:15

Devender Verma · Accepted Answer · 2018-10-12 05:21:18Z

2

If you are running your express server on PORT: 8080, Then add below line in package.json

"proxy": "http://localhost:8080"

answered Oct 12, 2018 at 5:21

Devender Verma

945 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Devender Verma Over a year ago

Also you should never use "this.state.savedArticles.push(article);". state modifications like this method is not recommended. Please check react docs for more info.

Michael Kim Over a year ago

Added it as a property of package.json and it returns 500 error in console. Error: Request failed with status code 500 at createError (createError.js:17) at settle (settle.js:19) at XMLHttpRequest.handleLoad (xhr.js:78) in the terminal console : Proxy error: Could not proxy request /api/articles/5bb3ffc4068401528a2de27b from localhost:3001 to localhost:3001. See nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

Devender Verma Over a year ago

@MichaelKim, Please modify your server PORT in server.js file to 8080 for this to work. I believe you have your server running on some different port....

zaerymoghaddam · Accepted Answer · 2019-07-23 05:21:58Z

Instead of working in development build ,you can create a Production build. Rendering development build js files on UI takes a hell of a time as compared to production version which is very compact, compressed for better user experience and loading on UI. In production mode the code runs on your client's machine, so this makes rendering of file on end user's browser very quick and performance enhancing.

Steps to change from development build to production build:

Hit ctrl + c in the terminal to exit from development build.
In your project directory To create a production build, use npm run build.
After the successful compilation of the above command, use serve -s build to deploy a static server.

If you see this output in the terminal

│ Serving! │ │ │ │ - Local: http://localhost:5000 │ │ - On Your Network: http://172.16.2.1:5000 │ │ │

You have successfully compiled the production build!

Collectives™ on Stack Overflow

My Axios call is returning a 404 error, React/Express

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related