Question

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

我正在使用ReactJS作为前端，并使用带有express的node.js作为后端。我在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);
 });
});

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

1 个答案: