CODEWITHSUNDEEP
javascriptnode.jsexpressfetchaxios
StupidHTTP
StupidHTTP

Reputation: 141

Why does my webpage refresh after a NodeJS POST request?

I'm using the express framework with NodeJS. When a client makes a POST request, it pushes some work off to a python script and then returns a JSON object to the client webpage.

My problem is that the client refreshes whenever my POST request completes. I've tested with both the Axios and Fetch http clients. How do I prevent my webpage from refreshing when making a POST request like this?

The server code looks something like:

app.post("/data/", function(req, res) { 

    const spawn = require("child_process").spawn;
    const pythonProcess = spawn('python', ["my_script.py"]);

    pythonProcess.stdout.on('data', (data) => {
          let result = data.toString();
          res.send(JSON.stringify(result));
     });
});

Then I make a request from my React client (using Axios, but Fetch behaves the same way):

axios({
  method: 'post',
  url: `http://localhost:3001/videos/?url=${url}`,
  responseType: 'json',
});

And the client webpage refreshes...

I know React isn't to blame, because nothing is updating the application state. Even if I do nothing with the response from the server, the webpage still refreshes when the POST completes.

Also, there's no form element on my webpage or anything like that, and my button is of type button and not of type submit.

I have a hunch it's something with the way that the python process itself is called, because if I just return a plain JSON object without calling a python subprocess, my client webpage gets the data and doesn't refresh.

Upvotes: 4

Views: 4179

Answers (5)

Windrider
Windrider

Reputation: 57

SeanMC's answer was not working for me but got me in the proper direction.

Indeed, if an <input type="submit"> is used into a form, the page will automatically refresh after action. However, is you use <input type="button"> instead, you can still used the onClick action without having the page auto refresh.

Upvotes: 0

Sundar Ganapathy
Sundar Ganapathy

Reputation: 65

I had this problem in ReactJS client side axios.post . I had initially ignored the promise, but after adding a .then(), the issue had disappeared. However I do not know how adding .then() fixed the problem

Upvotes: 0

SeanMC
SeanMC

Reputation: 2346

If you're doing your nodeJS post based on data collected from a <form> -after a user has clicked a button of type=submit, then the issue is that the native HTML behavior of a form's submit button is to do a page refresh.

The way to fix this is -in your form onsubmit, maybe it's onSubmit={handleSubmit} on that handleSubmit function, have it accept an event, call it whatever you want. Then do event.preventDefault() before any other code. Like this: 

handleSubmit(e){
   e.preventDefault();
  // the rest of your code, post call ,etc
}

Upvotes: 2

StupidHTTP
StupidHTTP

Reputation: 141

I figured it out. Part of my python process was writing files to React's public folder, which apparently causes React to hot-reload.

Upvotes: 9

Tarun Khurana
Tarun Khurana

Reputation: 1037

I think, you need to make changes in response header i.e. response type is of json type.

var headers = {};
headers["Content-Type"] = 'application/json';
res.writeHead(200, headers);

app.options('/*', function (req, res) {
var headers = {};

// set header to handle the CORS
headers['Access-Control-Allow-Origin'] = '*';
//headers['Access-Control-Allow-Origin'] = 'http://localhost:?';
headers['Access-Control-Allow-Headers'] = 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With';
headers['Access-Contrl-Allow-Methods'] = 'PUT, POST, GET, DELETE, OPTIONS';
headers["Access-Control-Max-Age"] = '86400';
headers["Content-Type"] = 'application/json';
res.writeHead(200, headers);
res.end();
});

I don't know the python syntax, but it should help.

Upvotes: -1

Related Questions