如何使用相同的端口来响应Js和Node？

Question

实际上，我正在使用reactjs和nodejs在网站上创建联系人表单。我已经使用React创建了表单，对于后端，我必须连接节点js，以便接收电子邮件。但两者都没有发生，节点应该运行在同一个端口上。我在http://localhost:3000中给出了一个“package.json”的代理，但是它仍然不起作用。

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

节点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

你不能用你所遵循的方法来实现这一点。

为什么？

您正试图在一个端口上运行两个不同的服务器(节点服务器和webpackdev服务器)。

有其他选择吗？

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

怎么做？

1. 构建您的应用程序(用于创建-反应-应用程序npm run build)
2. 将build文件夹的所有内容复制到快速应用程序中的新文件夹(例如public)。
3. 现在，在节点js代码中添加以下内容(以提供静态文件)： app.use('/', express.static('./public'));

现在访问http://localhost:3000

Answer 2

我假设您使用的是create，并且您已经将代理配置添加到package.json中了。

configuration app是在3000端口上启动的，所以您的快速服务器应该在任何其他端口(而不是3000)上启动，然后将代理配置更改为该端口。

例如，const = process.env.PORT收/ 5000；而不是像“代理”："http://localhost:5000“那样改变前端package.json代理配置

请注意，这应该仅用于开发。用于生产:构建包，并使用express为构建文件夹中的静态内容提供服务。

Answer 3

如果您使用像create-react-app应答是这样的工具“不能这样做”，因为您不能在生产模式下编辑nodejs服务器和其他方面，create-react-app构建项目并且在生产中没有任何nodejs服务器。

但是，当您以纯和SSR的形式进行开发时，您可以访问nodejs服务器，并且可以这样做。

--请参见react：

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