Node.js 反应联系人表单错误

我有一个问题，我的联系人表单出现了一个错误，在dev工具控制台选项卡中显示了以下内容

消息未发送 无法获取/api/api/form 加载资源失败：服务器响应状态为404（）

联系人表单被导入到模式中，当我填写凭据时，它意味着发送并显示一条消息，该消息表示已发送，但如上所述，我没有收到我在代码消息中输入的消息“未发送”，然后控制台选项卡显示其他两条消息

SERVER.JS

const express = require("express");
const bodyParser = require("body-parser");
const nodemailer = require('nodemailer');
const cors = require("cors");
const http = require("HTTP");

const app = express();
const server = http.createServer(app);
const morgan = require("morgan");
const PORT = process.env.PORT || 8081;

var corsOptions = {
    origin: [
        "http://localhost:3000",
        "http://localhost:5000"
    ],
};

// routes
const router = require("./routes/router");
const projectRouter = require("./routes/projectRoutes");
const usersRouter = require("./routes/usersRoutes");
const mailSender = require("./routes/mailSender");

//node mailer
app.use(morgan("dev"));
app.use(express.json());

//middlewares
app.use(bodyParser.json());
app.use(cors(corsOptions));
app.use(cors());

// parse requests of content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

//Contact form 
app.get('/', () => {
    res.send('welcome to the contact form')
})

app.post('/api/form', (req, res) => {

    let data = req.body
    let smtpTransport = nodemailer.createTransport({
        service: 'Gmail',
        port: 465,
        auth:{
            user: 'hidden email ',
            pass: 'password2021'
        }
    })

    let mailOptions = {
        from: data.email,
        to: 'hidden email',
        subject: `Message from ${data.name}`, 
        html: `
        <h3>Information</h3>
            <ul>
            <li>Name: ${data.name}</li>
            <li>Lastname: ${data.lastname}</li>
            <li>Email: ${data.email}</li>
            </ul>

            <h3>Message</h3>
            <p>${data.message}</p>
        `
    };

    smtpTransport.sendMail(mailOptions, (error, response) => {
        if(error){
            res.send(error)
        }
        else{
            res.send('Success')
        }
    })

    smtpTransport.close();
})

app.listen(PORT, () => {
    console.log(`server is starting on port ${PORT}`)
})

//Mongoose
const MONGODB_URI =
    "mongodb+srv://periGroup:password2021@pericluster.vn1i8.mongodb.net/periGroup? 
retryWrites=true&w=majority";

const mongoose = require("mongoose");
const db = require("./models");
const Role = db.role;
const Customer = db.customer;

db.mongoose
    .connect(MONGODB_URI || "mongodb://localhost/peri_db", {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    })
    .then(() => {
        console.log("Successfully connect to MongoDB.");
        initial();
    })
    .catch((err) => {
        console.error("Connection error", err);
        process.exit();
    });

mongoose.connection.on("connected", () => {
    console.log("Mongoose is connected!!!");
});

mongoose.connection.on(
    "error",
    console.error.bind(console, "connection error:")
);

app.use(router);
app.use(usersRouter);
app.use(projectRouter);
app.use(mailSender);

require("./routes/auth.routes")(app);

//server.listen(PORT, () => console.log(`Server has started on port ${PORT}`));

function initial() {
    Role.estimatedDocumentCount((err, count) => {
        if (!err && count === 0) {
            new Role({
                name: "designer",
            }).save((err) => {
                if (err) {
                    console.log("error", err);
                }

                console.log("added 'designer' to roles collection");
            });

            new Role({
                name: "technical",
            }).save((err) => {
                if (err) {
                    console.log("error", err);
                }

                console.log("added 'technical' to roles collection");
            });

            new Role({
                name: "admin",
            }).save((err) => {
                if (err) {
                    console.log("error", err);
                }

                console.log("added 'admin' to roles collection");
            });
        }
    });

    Customer.estimatedDocumentCount((err, count) => {
        if (!err && count === 0) {
            new Customer({
                name: "sepehr",
                email: "sepehr2000.sn@gmail.com",
            }).save((err) => {
                if (err) {
                    console.log("error", err);
                }

                console.log("added customer to collection");
            });

            new Customer({
                name: "Cardiff",
                email: "sepehr2000.sn@gmail.com",
            }).save((err) => {
                if (err) {
                    console.log("error", err);
                }
                console.log("added customer to collection");
            });
        }
    });
}

module.exports = app;

const express=require（“express”）；
const bodyParser=require（“body parser”）；
const nodemailer=require（'nodemailer'）；
const cors=要求（“cors”）；
const http=require（“http”）；
常量app=express（）；
const server=http.createServer（app）；
const morgan=要求（“摩根”）；
const PORT=process.env.PORT | | 8081；
var公司={
来源：[
"http://localhost:3000",
"http://localhost:5000"
],
};
//路线
常量路由器=需要（“./路由/路由器”）；
const projectRouter=require（“./routes/projectRoutes”）；
const usersRouter=require（“./routes/usersRoutes”）；
const mailssender=require（“./routes/mailssender”）；
//节点邮件器
应用程序使用（摩根（“开发”））；
使用（express.json（））；
//中间商
use（bodyParser.json（））；
应用程序使用（cors（corsOptions））；
应用程序使用（cors（））；
//解析内容类型为application/x-www-form-urlencoded的请求
use（bodyParser.urlencoded（{extended:true}））；
//联系方式
app.get（'/'，（）=>{
res.send（'欢迎使用联系方式'）
})
app.post（'/api/form'，（req，res）=>{
let data=req.body
让smtpTransport=nodeEmailer.createTransport({
服务：“Gmail”，
港口：465，
认证：{
用户：“隐藏电子邮件”，
通行证：'password2021'
}
})
让邮件选项={
发件人：data.email，
至：'隐藏电子邮件'，
主题：`messagefrom${data.name}`，
html:`
问询处

名称：${data.Name}
Lastname:${data.Lastname}
电子邮件：${data.Email}

消息
${data.message}

`
};
smtpTransport.sendMail（邮件选项，（错误，响应）=>{
如果（错误）{
res.send（错误）
}
否则{
res.send（'成功'）
}
})
smtpTransport.close（）；
})
应用程序侦听（端口，（）=>{
log（`server正在端口${port}`上启动）
})
//猫鼬
蒙哥杜里警官=
“mongodb+srv://periGroup:password2021@pericluster.vn1i8.mongodb.net/periGroup？
retryWrites=真&w=多数”；
const mongoose=需要（“mongoose”）；
const db=需要（“/型号”）；
const Role=db.Role；
const Customer=db.Customer；
猫鼬
.connect（MONGODB|u URI |”mongodb://localhost/peri_db", {
useNewUrlParser:true，
useUnifiedTopology：正确，
})
.然后（（）=>{
log（“成功连接到MongoDB”）；
首字母（）；
})
.catch（（错误）=>{
控制台错误（“连接错误”，err）；
process.exit（）；
});
mongoose.connection.on（“connected”，（）=>{
log（“Mongoose已连接！！！”；
});
猫鼬(
“错误”，
console.error.bind（控制台，“连接错误：”）
);
应用程序使用（路由器）；
应用程序使用（usersRouter）；
应用程序使用（projectRouter）；
应用程序使用（邮件发送者）；
要求（“./routes/auth.routes”）（应用程序）；
//server.listen（端口，（）=>console.log（`server已在端口${PORT}`）上启动）；
函数初始值（）{
Role.estimatedDocumentCount（（错误，计数）=>{
如果（！err&&count==0）{
新角色({
名称：“设计师”，
}).保存（（错误）=>{
如果（错误）{
日志（“错误”，err）；
}
log（“将“设计器”添加到角色集合”）；
});
新角色({
名称：“技术”，
}).保存（（错误）=>{
如果（错误）{
日志（“错误”，err）；
}
log（“将“技术”添加到角色集合”）；
});
新角色({
名称：“管理员”，
}).保存（（错误）=>{
如果（错误）{
日志（“错误”，err）；
}
log（“在角色集合中添加了“admin”）；
});
}
});
Customer.estimatedDocumentCount（（错误，计数）=>{
如果（！err&&count==0）{
新客户({
名称：“sepehr”，
电邮:"seper2000。sn@gmail.com",
}).保存（（错误）=>{
如果（错误）{
日志（“错误”，err）；
}
console.log（“将客户添加到集合”）；
});
新客户({
姓名：“加的夫”，
电邮:"seper2000。sn@gmail.com",
}).保存（（错误）=>{
如果（错误）{
日志（“错误”，err）；
}
console.log（“将客户添加到集合”）；
});
}
});
}
module.exports=app；

**以下代码是其ELT的联系方式

import React，{Component}来自'React'；
从“axios”导入axios；
导入“./form.css”
导出默认类表单扩展组件{
陈述={
名称：“”，
姓氏：“”，
电子邮件：“”，
消息：“”，
发送：错误
}
//处理输入
handleName=（e）=>{
这是我的国家({
名称：e.target.value
})
}
handleLastname=（e）=>{
这是我的国家({
姓氏：e.target.value
})
}
handleEmail=（e）=>{
这是我的国家({
电子邮件：e.target.value
})
}
handleMessage=（e）=>{
这是我的国家({
信息：e.target.value
})
}
//手柄末端输入
formSubmit=（e）=>{
e、 预防默认值（）；
import React, { Component } from 'react';

import axios from 'axios';
import './form.css'

export default class Form extends Component {

state={
    name:'',
    lastname:'',
    email:'',
    message:'',
    sent: false
}

// handle inputs
handleName = (e) => {
    this.setState({
        name: e.target.value
    })
}

handleLastname = (e) => {
    this.setState({
        lastname: e.target.value
    })
}

handleEmail = (e) => {
    this.setState({
        email: e.target.value
    })
}

handleMessage = (e) => {
    this.setState({
        message: e.target.value
    })
}
//end of handle inputs

formSubmit = (e) => {
    e.preventDefault();
    let data = {
        name: this.state.name,
        lastname: this.state.lastname,
        email: this.state.email,
        message: this.state.message
    }
    axios.post('/api/form', data)
    .then(res => {
        this.setState({
            sent: true

        }, this.resetForm())
    }).catch(() => {
        console.log('message not sent');
    })
}

// for resetting form data
resetForm = () => {
    this.setState({
        name:'',
        lastname:'',
        email:'',
        message:''
    })

    setTimeout (() => {
        this.setState({
            sent: false
        })
    }, 3000)
}

    render() {
        return(
            <div className="container">
                <form onSubmit={this.formSubmit}>
                    {/* single item */}
                    <div className="singleItem">
                        <label htmlFor="name">name</label>
                        <input type="text" 
                        name="name" 
                        className="name" 
                        placeholder="your name..." 
                        value={this.state.name}
                        onChange={this.handleName}
                        required
                        />
                    </div>
                    {/* end of single item */}

                    {/* single item */}
                    <div className="singleItem">
                        <label htmlFor="lastname">Lastname</label>
                        <input type="text" 
                        name="lastname" 
                        className="lastname" 
                        placeholder="your lastname..." 
                        value={this.state.lastname}
                        onChange={this.handleLastname}
                        required
                        />
                    </div>
                    {/* end of single item */}

                    {/* single item */}
                    <div className="singleItem">
                        <label htmlFor="email">Email</label>
                        <input type="text" 
                        name="email" 
                        className="email" 
                        placeholder="your email..." 
                        value={this.state.email}
                        onChange={this.handleEmail}
                        required
                        />
                    </div>
                    {/* end of single item */}

                    {/* single item */}
                    <div className="textArea singleItem">
                        <label htmlFor="message">Message</label>
                        <textArea name="message"
                        id=""
                        cols="30" rows="5"
                        placeholder="your message..."
                        value={this.state.message}
                        onChange={this.handleMessage}
                        resetForm
                        ></textArea>
                    </div>
                    {/* end of single item */}

                    <div className={this.state.sent ? 'msg msgAppear':'msg'}>Message has been sent</div>

                    <div className="btn">
                        <button type="submit">Submit</button>
                    </div>
                </form>
            </div>
        )
    }
}

import React, { useEffect, useState } from "react";
import { Box, Container, Flex } from "@chakra-ui/layout";
import { Button } from "@chakra-ui/react";
import Timeline from "../Events/Timeline";
import ProjectService from "../../services/project.service";
import ProjectDetailsCustomer from "../Project/ProjectDetailsCustomer";
import Form from '../contactForm/Form'
import { EmailIcon } from "@chakra-ui/icons";
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
  } from "@chakra-ui/react"
import { useDisclosure } from "@chakra-ui/react"

const CustomerProjectView = (props) => {
    const projectId = props.match.params.param1;
    const [project, setProject] = useState(props.project);


    useEffect(() => {
        if (projectId !== undefined) {
            ProjectService.getProjectByID(projectId).then((projectReturned) => {
                setProject(projectReturned);
            });
        }
    }, [projectId]);

    const { isOpen, onOpen, onClose } = useDisclosure()

    return (
        <Container maxW="6xl" marginTop={12} marginBottom={12}>
            <Flex bg={"brand.background"} borderRadius={8} boxShadow="lg">
                {projectId ? (
                    <Box m={10}>
                        <ProjectDetailsCustomer project={project} />
                        <>
                        <Button
                            leftIcon={<EmailIcon />}
                            colorScheme={"blue"}
                            marginBottom={20}
                            onClick={onOpen}>
                                Contact Us
                                </Button>

                        <Modal isOpen={isOpen} onClose={onClose}>
                            <ModalOverlay />
                            <ModalContent>
                            <ModalHeader>Contact Form</ModalHeader>
                            <ModalCloseButton />
                            <ModalBody>
                                <Form />
                            </ModalBody>
                            <ModalFooter>
                                <Button colorScheme="blue" mr={3} onClick={onClose}>
                                Close
                                </Button>
                            </ModalFooter>
                            </ModalContent>
                        </Modal>
                        </>
            
                        <Timeline project={project} />
                    </Box>
                ) : (
                    <></>
                )}
            </Flex>
        </Container>
    );

};

export default CustomerProjectView;