Question

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

项目结构：

cssd->运行npm的地方开始启动后端
cssd / routes /-> users.js与获取代码的路由一起位于的位置
cssd / client /->我在运行npm的地方开始启动前端
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设置？如果是这样，您可以向客户端的package.json添加一个代理（React）

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

Answer 2

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

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

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

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

无法从表单接收数据

2 个答案: