为什么我的网页在 NodeJS POST 请求后刷新？

Question

我正在使用带有 NodeJS 的 express 框架。当客户端发出 POST 请求时，它会将一些工作推送到 python 脚本，然后返回一个 JSON 对象到客户端网页。

我的问题是每当我的 POST 请求完成时客户端都会刷新。我已经使用 Axios 和 Fetch http 客户端进行了测试。 在发出这样的 POST 请求时如何防止我的网页刷新？

服务器代码如下所示：

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));
     });
});

然后我从我的 React 客户端发出请求（使用 Axios，但 Fetch 的行为方式相同）：

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

并且客户端网页刷新...

我知道 React 不应该受到责备，因为没有任何东西会更新应用程序状态。即使我对来自服务器的响应什么都不做，当 POST 完成时，网页仍然会刷新。

另外，我的网页上没有表单元素或类似的东西，我的button 是button 类型而不是submit 类型。

我有一种预感，这与调用 python 进程本身的方式有关，因为如果我只返回一个普通的 JSON 对象而不调用 python 子进程，我的客户端网页会获取数据并且不会刷新。

Answer 1

我想通了。我的 python 进程的一部分是将文件写入 React 的 public 文件夹，这显然会导致 React 热重载。

Answer 2

如果您基于从<form> 收集的数据发布 nodeJS 帖子 - 在用户单击 type=submit 的按钮之后，那么问题是表单提交按钮的原生 HTML 行为是页面刷新。

解决此问题的方法是 - 在您的提交表单中，可能是该 handleSubmit 函数上的 onSubmit={handleSubmit}，让它接受一个事件，随心所欲地调用它。然后在任何其他代码之前执行 event.preventDefault() 。像这样：

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

Answer 3

我在 ReactJS 客户端 axios.post 中遇到了这个问题。我最初忽略了这个承诺，但在添加了一个 .then() 之后，问题就消失了。但是我不知道添加 .then() 是如何解决问题的

Answer 4

SeanMC 的回答对我不起作用，但让我找到了正确的方向。

确实，如果在表单中使用<input type="submit">，页面会在操作后自动刷新。但是，如果您改用<input type="button">，您仍然可以使用 onClick 操作而无需自动刷新页面。

Answer 5

我认为，您需要更改响应标头，即响应类型为 json 类型。

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();
});

我不知道 python 语法，但它应该会有所帮助。