Question

实际上，我希望使用reactjs和nodejs在网站上创建联系表单。我已经使用React创建了表单，对于后端，我必须连接节点js，以便可以接收电子邮件。但这没有发生 React和Node都应在同一端口上运行。我在package.json中指定了一个代理名称为“ http://localhost:3000”，但仍然无法正常工作。

我已经给出了react js和node 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>
    );
  }
}

Node JS代码

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}`);

})

Answer 1

如果您使用create-react-app之类的工具，答案是“不能执行此操作” ，因为您不能编辑nodejs服务器，也不能在生产模式下编辑{{1 }}建立专案，并且生产中没有任何create-react-app服务器。

但是当您开发纯净的和SSR的反应时，您可以访问nodejs服务器并执行此操作。

请参阅此处以了解SSR：

https://medium.freecodecamp.org/demystifying-reacts-server-side-render-de335d408fe4

Answer 2

我假设您正在使用create-react-app，并且已将代理配置添加到package.json。

Create-react-app在3000端口上启动，因此您的Express服务器应在其他任何端口（NOT 3000）上启动，然后将代理配置更改为该端口。

即const PORT = process.env.PORT || 5000; 比更改前端package.json代理配置，例如“ proxy”：“ http://localhost:5000”

注意，这仅应用于开发。用于生产：构建捆绑包，然后使用express从build文件夹提供静态内容。

Answer 3

您所遵循的方法无法实现这一目标。

为什么？

您试图在单个端口上运行两个不同的服务器（节点服务器和webpackdev服务器）

还有其他选择吗？

是的，根据您的要求，您不需要用于前端的单独服务器，您可以将其用作静态文件。

如何？

构建您的应用程序（用于create-react-app { "message": { "errors": { "path": { "message": "Cast to Array failed for value \"[ { position: { x: '1111', y: '2222' }, orientation: { x: '0' } },\n { position: { x: '1111', y: '2222' }, orientation: { x: '0' } } ]\" at path \"path\"", "name": "CastError", "stringValue": "\"[ { position: { x: '1111', y: '2222' }, orientation: { x: '0' } },\n { position: { x: '1111', y: '2222' }, orientation: { x: '0' } } ]\"", "kind": "Array", "value": [ { "position": { "x": "1111", "y": "2222" }, "orientation": { "x": "0" } }, { "position": { "x": "1111", "y": "2222" }, "orientation": { "x": "0" } } ], "path": "path", "reason": { "message": "Cast to ObjectId failed for value \"{ position: { x: '1111', y: '2222' }, orientation: { x: '0' } }\" at path \"path\"", "name": "CastError", "stringValue": "\"{ position: { x: '1111', y: '2222' }, orientation: { x: '0' } }\"", "kind": "ObjectId", "value": { "position": { "x": "1111", "y": "2222" }, "orientation": { "x": "0" } }, "path": "path" } } }, "_message": "Path validation failed", "message": "Path validation failed: path: Cast to Array failed for value \"[ { position: { x: '1111', y: '2222' }, orientation: { x: '0' } },\n { position: { x: '1111', y: '2222' }, orientation: { x: '0' } } ]\" at path \"path\"", "name": "ValidationError" } }）
将public static void main(String[] args) { Scanner scan = new Scanner(System.in); int i = scan.nextInt(); Double d = scan.nextDouble(); String f = scan.nextLine(); String s = scan.nextLine(); // Write your code here. System.out.println("String: " + s); System.out.println("Double: " + d); System.out.println("Int: " + i); }文件夹的所有内容复制到快速应用程序中的新文件夹（例如npm run build）。
现在在您的节点js代码中添加以下内容（以提供静态文件）：

build

，现在访问public

Answer 4

使用webpack / dev-server的解决方案

newdata文件：

package.json

如果将dev-sever与webpack一起使用，请在"proxy": "http://localhost:5000",中添加以下内容：

webpack.cofing.js

proxy: { '/api': "http://localhost:5000", },文件：

backend.js

当您打开站点类型时：const server = http.createServer((req, res) => { res.write('Hello World!'); res.end(); }); server.listen({ host: 'localhost', port: 5000, });（或您的默认设置），然后当您想打开localhost:8080服务器时，只需在您的网址中添加node.js像这样：/api。

Answer 5

我找到了解决方案如何在同一端口上启动react和nodejs应用程序。请打开git链接 https://github.com/chandrakant1990/react-node-express-app-on-same-port

克隆此仓库。在Client fordder中，只需执行命令 npm安装然后启动应用 sh start.sh

您的应用将在localhost：3000上启动

对于客户端更改，您无需再次重新启动应用程序。对于服务器端更改，请重新启动应用。

有关更多详细信息，请参见视频 https://youtu.be/AiEC2_8mIIY

Answer 6

我认为最好使用同一端口实现的唯一方法是使用服务器端渲染。您可以在此处了解更多信息

https://www.freecodecamp.org/news/demystifying-reacts-server-side-render-de335d408fe4/

如何为React Js和Node Js使用相同的端口？

反应JS代码

Node JS代码

6 个答案: