使用 Express 在 Node.js 中检索 POST 数据

Question

作为免责声明：我在这里阅读了很多关于这个主题的问题，它们听起来都很相似，但没有一个能帮助我解决我的问题，所以我决定发布我自己的问题。

我正在使用 ReactJS 作为前端并使用 node.js 和 express 作为后端。我的 ReactJS 应用程序中有以下表单：

handleFormSubmit (event) {
    event.preventDefault();

    var data = {
        entries : this.state.entry
    };

    $.ajax({
        type:"POST",
        url: "/todos",
        data: data,
        cache: false,
        success: function(data) {
            console.log("success");
        },
        error: function(xhr, status, err) {
            console.log("Sorry, there has been an error. Could not send data." + JSON.stringify(data));
        }
    });
}

render() {
    return (
      <div className="App">
        <form onSubmit={this.handleFormSubmit} enctype="multipart/form-data">
            <input onChange={this.handleChange} value={this.state.value}></input>
            <button type="submit">Submit List</button>
        </form>
        <button type="button" onClick={this.handleAdd}>Add</button>
    <ul>
    {this.state.entry.map((data, n) => 
            <li key={"this"+data} id={n}>{this.state.entry[n]}></li>
        )
    }
    </ul>
  </div>
);

}

旁注：/todos 是我的应用程序路由器文件夹中的一个文件，我通过http://localhost:8001/todos 访问它。 create-react-app 在端口 3000 上运行。（不确定它是否与这个问题相关，因此我会保持简短。我按照本教程https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ 将我的反应前端与我的节点/快递连接起来-结束）。

这就是我目前尝试检索节点中数据的方式（在我的 app.js 文件中）：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.get('/todos/:entries', function (req, res, next) {
    Todo.findById(req.params.entries, function(err, todo) {
        if(err) res.send(err);
        res.json(todo);
        console.log(todo);
    });
});

但这就是我的地方，有点困惑。显然它不起作用，或者至少我没有收到我认为应该的 console.log 消息。此外，在我的表单中，我将 todos.js 文件指定为应该接收数据的文件，但我看到的所有答案都使用了app.post()。他们是在 app.js/server.js 文件中还是在路由文件中使用它？如果是这样，那究竟是如何工作的？以及如何使用路由文件中的数据？为什么我这样做的方式不起作用？ （如果您需要更多信息来回答这个问题，请告诉我）

编辑：

在 app.js 中：

var todos = require('./routes/todos');
app.use('/todos', todos);

在 todos.js 中：

var express = require('express');
var router = express.Router();
router.get("/", function (req, res) {
    //didn't know how to retrieve the data here
});

Answer 1

你可以使用npm install axios这个包并参考这里https://www.npmjs.com/package/axios

在反应应用程序中，您可以使用此代码

import axios from 'axios';

axios.post('/user', data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

对于您的 Node express 应用，您可以使用

const express = require('express');
const app = express();
const bodyParser = require('body-parser');


app.use(bodyParser.urlencoded({extended: true}))

此代码用于从不同端口访问跨源错误

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers','Origin, X-Requested-With, 
  Content-Type, Accept, Authorization');
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Methods','PUT, POST, PATCH, 
    DELETE, GET');
    return res.status(200).json({});
}
   next();
})

然后你就可以使用你的代码了

app.get('/todos/:entries', function (req, res, next) {
Todo.findById(req.params.entries, function(err, todo) {
    if(err) res.send(err);
    res.json(todo);
    console.log(todo);
 });
});