React/Node js 应用程序可以在开发中运行，但不能在生产中运行不断收到“POST https://phlatt.herokuapp.com/send 404未找到”错误

如何解决React/Node js 应用程序可以在开发中运行，但不能在生产中运行不断收到“POST https://phlatt.herokuapp.com/send 404未找到”错误

此应用在我的 github (https://github.com/CSTy28/PhlattMusic) 中。

我们的目标是制作一个联系表格，并在按下发送按钮时自动向我自己发送一封电子邮件，从前端的表格中提取信息。

服务器中涉及的唯一组件是 components 文件夹中的 contact.js 和 server 文件夹中的 index.js。这是我使用 axios 发布到服务器的 contact.js 代码：

import {useState,useEffect} from 'react';
import axios from 'axios';


function Contact() {

    const [state,setState] = useState({
        name: '',email: '',message: ''
    });

    const [result,setResult] = useState(null);

    const onInputChange = event => {
        //var name = event.target.name;
        //var value = event.target.value
        const {name,value} = event.target
    
        setState({
          ...state,[name]: value
        });
        console.log(state)
      };

    const sendEmail = event => {
        event.preventDefault();
        axios
            .post('/send',{ ...state })
            .then(response => {
                setResult(response.data);
                setState({ name: '',subject: '',message: '' });
            })
            .catch(() => {
                setResult({ success: false,message: 'Something went wrong. Try again later'});
            });
    }
    



    



    function scroll (){
        console.log(window.scrollY)
        if (window.scrollY > 2000) {
            var citems = document.querySelectorAll('.contact-item');
            citems.forEach(inp => inp.classList.add('active'))
        }
      }
    
        window.addEventListener('scroll',scroll)

    return (
        <section className='contactSection' id='contact-me'>

            <div>
                <h1 className='contact-item c-item1'>Contact Me</h1>
            </div>

            {result && (
        <p className={`${result.success ? 'success' : 'error'}`}>
          {result.message}
        </p>
      )}
            
            <form onSubmit={sendEmail}>
                <div className='contact-item c-item2'>
                    <input type='text' name='name' placeholder='Name' onChange={onInputChange} ></input>
                </div>
                <div className='contact-item c-item3'>
                    <input type='email' name='email' placeholder='Email Address' onChange={onInputChange} ></input>
                </div>
                <div className='contact-item c-item4'>
                    <textarea type='text' name='message' placeholder='Message' cols='60' rows='10' onChange={onInputChange} ></textarea>
                </div>
                <button className='contact-item c-item5' type='submit'>SEND</button>
                
                
            </form>
            
        </section>
    )
}

export default Contact

这是后端使用express从前端的表单中获取信息的代码。在开发过程中一切正常，但在我的 phlatt.herokuapp.com 网站上出现错误。

const sgMail = require("@sendgrid/mail");
const dotenv = require('dotenv');
dotenv.config();

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

const path = require('path');
const express = require('express');
const transporter = require('./config');
//const dotenv = require('dotenv');
//dotenv.config();
const app = express();


const buildpath = path.join(__dirname,'..','build');
app.use(express.json());
app.use(express.static(buildpath));

app.post('/send',(req,res) => {
  console.log(req.body)
  const msg = {
    to: req.body.email,from: "CSTyy28@gmail.com",subject: "Confirmation",text: req.body.message,html:`
        <p>You have a new contact request.</p>
        <h3>Contact Details</h3>
        <ul>
          <li>Name: ${req.body.name}</li>
          <li>Email: ${req.body.email}</li>
          <li>Subject: "Confirmation"</li>
          <li>Message: ${req.body.message}</li>
        </ul>`
  };

  sgMail.send(msg).then(() =>  {
    console.log('Message sent')
  }).catch((error) => {
    console.log(error.response.body)
    // console.log(error.response.body.errors[0].message)
  })
  
});



app.listen(443,() => {
  console.log('server start on port 4000');
});