javascript - 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: '', email: '', 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');
});

标签： javascriptnode.jsreactjsexpresssendgrid

javascript - React/Node js 应用程序在开发中工作，但在生产中不工作。不断收到“POST https://phlatt.herokuapp.com/send 404（未找到）”错误

问题描述

解决方案

推荐阅读