从 React.js 到节点后端的休息调用错误答案

【问题标题】：Rest call error from React.js to node backend从 React.js 到节点后端的休息调用错误
【发布时间】：2020-10-22 13:41:43
【问题描述】：

下面的代码从 react.js 前端和后端 node.js 执行休息调用，但是当我执行休息调用时，我在后端看到 错误：非法参数未定义，为了解决这个问题，我试图在邮递员中打个休息电话，一切正常，错误在哪里？

前端 React.js：

import axios from 'axios';
import server from "../../../config/config";
import qs from 'qs';

 restlogin(email,password){ 
   
    const data = { 'Email': email,'Password': password };
     const options = {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        data: qs.stringify(data),
        url: "http://172.16.53.248:8989/login"
    }
      axios(options);
  }

后端 Node.js

app.post("/login", async function(request, response) {

    var ret = false;
    try {
        //var data = request.body;
        var data = request.body;
        console.log("\n Email: "+data.Email+"\n Password: "+data.Password);

        ret = await UserController.Login(
            data.Email,
            data.Password
        );
    } catch (err) {
        ManageError.SendError("Errore in login: " + err);
        ret = false;
    }
    response.setHeader("Content-Type", "application/json");
    response.send(
        JSON.stringify({
            return: ret
        })
    );
});

【问题讨论】：

控制台日志显示什么？
@YoandryCollazo 错误：非法参数未定义
后端的哪一行会抛出这个错误？
this : ret = await UserController.Login(data.Email, data.Password);
你能打印“数据”吗？

标签： javascript node.js reactjs frontend backend

【解决方案1】：

您是否在后端实现了 json-parser？如果没有，则需要在后端实现 json-parser 以接收包含 JSON 正文的请求。

【讨论】：

【解决方案2】：

我发现这里有几个问题。

您将以下字符串“qs.stringify(data)”传递给数据属性，结果如下所示：Email=test%40pmail.com&Password=my%20passwd

也就是说，你后端的 request.body 是一个空对象 {} 并且你永远不会通过这个实现获得这些值

使用 Postman 客户端工作的原因是（我认为）您在请求的正文中传递了一个 JSON 对象，但在您的 React 应用程序中您传递的是一个字符串。

Check is the 'qs.stringify' method is what you really want to use for your implementation.

【讨论】：

【解决方案3】：

前端 React.js：

import axios from 'axios';
import server from "../../../config/config";
import qs from 'qs';


 restlogin(email,password){ 



const data = { 'Email': email,'Password': password };
 const options = {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    data: JSON.stringify(data),
    url: "http://172.16.53.248:8989/login"
}
  axios(options);


 }

后端 Node.js

  app.post("/login", async function(request, response) {

var ret = false;
try {
    var data = JSON.parse(request.body);
    console.log("\n Email: "+data.Email+"\n Password: "+data.Password);

    ret = await UserController.Login(
        data.Email,
        data.Password
    );
} catch (err) {
    ManageError.SendError("Errore in login: " + err);
    ret = false;
}
response.setHeader("Content-Type", "application/json");
response.send(
    JSON.stringify({
        return: ret
    })
);
});

【讨论】：