无法从表单接收数据

Question

我目前遇到的问题是，当我使用 axios 在 React 中发送表单数据时，甚至没有它时，我都无法使用 express 在后端检索我的数据。我正在查看在后端控制台上收到的请求，但无法通过代码访问它。 React 代码通过端口 3000 上的 Node，3001 上的 Express。应用程序是使用 create-react-app 创建的，这是一张图片：Problem

项目结构：

cssd -> 我在哪里运行 npm 开始启动后端
cssd/routes/ -> 其中users.js是获取code的路径
cssd/client/ -> where i 运行 npm start launching front end
cssd/client/src/setupProxy.js -> 我的代理路由

我已经尝试创建一个 setupProxy.js 文件以及许多尝试接收数据的 get / post 方法，并且还搜索了堆栈上可用的任何信息，但是如果我错过了什么请让我知道。即使基地有console.log，我还是收不到。

在 setupProxy 中：

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/routes/*', 
        { target: "http://localhost:3001/" }
    ));
}

在客户的 App.js / React 中：

render() {
    return (
        <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
            <div className="form-group">
                <label htmlFor="name">Name</label>
                <input type="text" className="form-control" id="name"/>
            </div>
            <div className="form-group">
                <label htmlFor="exampleInputEmail1">Email address</label>
                <input type="text" className="form-control" id="email" aria-describedby="emailHelp"/>
            </div>

            <div className="form-group">
                <label htmlFor="message">Message</label>
                <textarea className="form-control" rows="5" id="message"></textarea>
            </div>

            <button type="submit" className="btn btn-primary">Submit</button>
        </form>
    )
}

handleSubmit(e)
{
    e.preventDefault();
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    var inputData = {name, email, message};
    fetch('/routes/users',
        {
            method: 'POST',
            body: inputData
        })
    alert("sent data");
    this.resetForm();
}

routes/users.js内/快递码：

var express = require('express');
var router = express.Router();
const bodyParser = require("body-parser");
const app = express();

app.use(
bodyParser.urlencoded({ // basically any extra characters
    extended: true
}),
bodyParser.json()
);

// Re-directs, ex entered in nothing, go to get
router.get("/routes/users", function(req, res) {
console.log("HERE 1 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});

router.post("/routes/users", function(req, res) {
console.log("HERE 2 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});

app.get("/routes/users", function(req, res) {
console.log("HERE 3 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});

app.post("/routes/users", function(req, res) {
console.log("HERE 4 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});

router.get("routes/users", function(req, res) {
console.log("HERE 5 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});

router.post("routes/users", function(req, res) {
console.log("HERE 6 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});

app.get("routes/users", function(req, res) {
console.log("HERE 7 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data: ", name, email, message);
});

app.post("routes/users", function(req, res) {
console.log("HERE 8 !");
var name = req.body.name;
var email = req.body.email;
var message = req.body.message;
console.log("The data", name, email, message);
});

const port = 3000;
//console.log(`Back end is listening on port ${port}`);
app.listen(port, () => console.log(`Back end is listening on port ${port}`));

module.exports = router;

预期的结果应该是我从其中一个函数收到一个 console.log，然后可以从那里使用我的代码，但我只是无法调用其中的任何一个。控制台中唯一显示的是在接收请求的后端

Answer 1

从服务器中删除所有代理，因为只有当您从同一主机和端口为客户端和服务器提供服务时才这样做。因此，请确保您的 app.listen 与您的客户端位于不同的端口。

const port = process.env.PORT || 5000
app.listen(port, () => console.log(`listnening on ${port}`));

这个应用程序是用 Create React App 设置的吗？如果是这样，您可以向客户端 (React)

的 package.json 添加代理

"proxy": "http://localhost:5000"

Answer 2

Create React 应用程序使用 webpack 开发服务器将您的应用程序提供给浏览器。您可以使用客户端的代理来实现您想要的。

在你的 React 应用的 package.json 中，添加 "proxy": "http://localhost:3001"

这里有来自 create react 应用的更多信息 docs。

您的后端代码不需要任何更改即可完成这项工作，事实上我什至会删除您后端中的所有代理设置代码。唯一需要做的就是在你的 React 应用中添加这个设置 package.json.

无法从表单接收数据

Can't receive data from form

forms

connection

proxy

express

reactjs