实际上，我希望使用reactjs和nodejs在网站上创建联系表单。我使用React创建了表单，对于后端，我必须连接节点js以便我可以接收电子邮件。但它没有发生React和Node都应该在同一个端口上运行。我在package.json中给了一个代理作为“http://localhost:3000”，但它仍然没有用。
我已经给出了反应js和节点js代码。请帮我解决这个错误。
import React, { Component } from "react";
import axios from "axios";
export default class formSection extends Component {
state = {
name: "",
email: "",
subject: "",
comment: ""
};
handleChange = e => {
this.setState({
[e.target.name]: e.target.value
});
};
async handleSubmit(e) {
e.preventDefault()
const {name, email, subject, comment} = this.state
const contact = await axios.post('/api/contact', {
name,
email,
subject,
comment
})
};
render() {
return (
<section
className="wow fadeIn big-section"
id="section-down"
style={{ visibility: true }}
>
<div className="container">
<div className="row equalize sm-equalize-auto">
<div
className="col-md-6 col-sm-12 col-xs-12 sm-margin-30px-bottom wow fadeInLeft"
style={{ visibility: true, height: 597 }}
>
<div className="padding-fifteen-all bg-light-gray border-radius-6 md-padding-seven-all xs-padding-30px-all height-100">
<span className="text-extra-dark-gray alt-font text-large font-weight-600 margin-25px-bottom display-block">
Ready to get started?
</span>
<form id="contact-form" onSubmit={e=>this.handleSubmit(e)} method="POST">
<div>
<div
id="success-contact-form"
className="no-margin-lr"
style={{ display: true }}
/>
<input
type="text"
name="name"
id="name"
value={this.state.name}
placeholder="Name*"
className="border-radius-4 medium-input"
onChange={this.handleChange}
/>
<input
type="text"
name="email"
value={this.state.email}
id="email"
placeholder="E-mail*"
className="border-radius-4 medium-input"
onChange={this.handleChange}
/>
<input
type="text"
name="subject"
id="subject"
value={this.state.subject}
placeholder="Subject"
className="border-radius-4 medium-input"
onChange={this.handleChange}
/>
<textarea
name="comment"
id="comment"
value={this.state.comment}
placeholder="Your Message"
rows="5"
className="border-radius-4 medium-textarea"
onChange={this.handleChange}
/>
<button
id="contact-us-button"
type="submit"
className="btn btn-small border-radius-4 btn-dark-gray"
>
send message
</button>
</div>
</form>
</div>
</div>
<div
className="col-md-6 col-sm-12 col-xs-12 last-paragraph-no-margin wow fadeInRight"
style={{ visibility: true, height: 597 }}
>
<div className="padding-ten-all bg-light-gray border-radius-6 md-padding-seven-all xs-padding-30px-all height-100 sm-text-center">
<img
src="images/about-img1.jpg"
alt=""
className="border-radius-6 margin-35px-bottom xs-margin-30px-bottom"
data-no-retina=""
/>
<span className="text-large font-weight-600 alt-font text-extra-dark-gray margin-5px-bottom display-block">
Let's plan for a new project?
</span>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry, Lorem Ipsum has been the standard dummy
text.
</p>
<a
href="about-us-modern.html"
className="btn btn-dark-gray btn-small text-extra-small border-radius-4 margin-25px-top"
>
About Company
</a>
</div>
</div>
</div>
</div>
</section>
);
}
}
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.post('/api/contact', (req, res) => {
console.log(req.body);
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`server listening in port ${PORT}`);
})
如果你使用像create-react-app这样的工具答案是“不能这样做”，因为你不能编辑nodejs服务器而在生产模式的另一边，create-react-app构建项目并且没有任何nodejs服务器在生产中。
但是当你开发反应为纯粹和SSR时，你可以访问nodejs服务器，并可以这样做。
看到这个反应SSR：
https://medium.freecodecamp.org/demystifying-reacts-server-side-render-de335d408fe4
我假设您正在使用create-react-app，并且您已将代理配置添加到package.json。
Create-react-app在3000端口上启动，因此您的快速服务器应该在任何其他端口（非3000）上启动，然后您将代理配置更改为该端口。
即const PORT = process.env.PORT || 5000;比改变前端package.json代理配置更像“代理”：“http://localhost:5000”
请注意，这应该仅用于开发。对于生产：构建捆绑包，并使用express来从build文件夹中提供静态内容。
使用您所遵循的方法无法实现此目的。
为什么？
您正尝试在单个端口（节点服务器和webpackdev服务器）上运行两个不同的服务器
还有其他选择
是的，根据您的要求，您不需要为前端提供单独的服务器，您可以将其作为静态文件提供。
怎么样？
npm run build）build文件夹的所有内容复制到快速应用程序中的新文件夹（例如public）。app.use('/', express.static('./public'));现在访问http://localhost:3000