与节点通信的反应问题

时间:2018-03-17 16:47:11

标签: node.js reactjs

这是反应获取:


   var json = {
     json: JSON.stringify({
         a: 1,
         b: 2
     }),
     delay: 3
 };

fetch('/saveInfo', {
         method: 'post',
         headers: {
             'Accept': 'application/json, text/plain, */*',
             'Content-Type': 'application/json'
         },

         body:  JSON.stringify(json.json)
     })
     .then(function (response) {
         return response.json();
     })
     .then(function (result) {
         alert(result);
          console.log("The file was saved!");
     })
     .catch (function (error) {
         console.log('Request failed');
     });

这是节点:

<pre>
var express = require('express');

module.exports = function(app) {
  var router = express.Router();

  router.get('/', function (req, res) {
    console.log('from node');
    console.log(req);


    res.json({status: 'UP'});
  });

  app.use("/saveInfo", router);
}
</pre>

上面的代码不适用于fetch的第二个参数。

但当我执行它时,没有第二个参数来获取如下:

fetch('/saveInfo')
     .then(function (response) {
         return response.json();
     })
     .then(function (result) {
         alert(result);
          console.log("The file was saved!");
     })
     .catch (function (error) {
         console.log('Request failed');
     });

工作正常,能够与节点程序进行通信。

任何人都可以帮我解决这个问题。我想将反应的UI表单发送给节点程序。

1 个答案:

答案 0 :(得分:0)

您还需要add a handler for the POST requests 在第一种情况的fetch方法中,您已将方法类型指定为POST,但节点对此没有任何处理 但是,当您不提供第二个参数时,它被视为GET请求并被router.get拦截 只需在节点中添加它(在app.use行之前):

router.post("/", function (req, res) {
  console.log('from node');
  console.log(req);
  res.json({status: 'UP'});
});

它将使节点能够侦听POST请求。

修改:要在router.post中访问发布请求正文参数,您需要body-parser个包。安装此软件包并在初始化快速路由器之前添加这两行:

app.use(bodyParser.json())  
app.use(bodyParser.urlencoded({ extended: false }))

阅读http://jilles.me/express-routing-the-beginners-guide/了解详细说明