javascript - Why does my webpage refresh after a NodeJS POST request? - Stack Overflow

admin管理员组

文章数量:1345090

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 pletes. 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 pletes.

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.

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 pletes. 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 pletes.

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.

• javascript
• node.js
• express
• fetch
• axios

Share Improve this question Follow asked Jul 23, 2018 at 23:53 StupidHTTPStupidHTTP 14111 silver badge44 bronze badges 3

• 1 The default action of a button on a form is to submit, so you probably need to prevent that in the button handler. – James Commented Jul 23, 2018 at 23:59
• I tried that. I really think it's a server side issue. But just in case, I tried adding in preventDefault and the like. No luck – StupidHTTP Commented Jul 24, 2018 at 0:12
• highly unlikely that it's a server side issue - a server can't control a browser like that, especially on an AJAX request - what happens in the browser develoepr tools console? – Jaromanda X Commented Jul 24, 2018 at 0:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

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

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
}

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

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.

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.

本文标签： javascriptWhy does my webpage refresh after a NodeJS POST requestStack Overflow