加载资源失败：服务器响应状态为 500（内部服务器错误）反应

Question

尝试使用表单发布请求，但服务器响应 500 错误。 handlesubmit function 看起来像这样，它不工作总是显示带有 500 代码的内部服务器错误。

async function handleSubmit(e){
    e.preventDefault();
    SetBtnText("Sending...");
    const response  = await fetch("http://localhost/form/contact",
    {
        mode: 'no-cors',
        method :"POST",
        headers: {
            "Content-Type": "application/json"
        },
        FormData
    })
    .then(resp => resp.json())
    .then(data => console.log(data));

    SetBtnText("Send");
    let result = await response.json();
    SetFormData(InitialFormData);
    if (result.code === 200){
        setStatus({ success: true, message: 'Message sent successfully' });
    } else{
        setStatus({ success: false, message: 'Something went wrong, please try again later.' });
    }
}

Server.js 看起来像这样..

const express =  require('express')
const cors = require("cors");
const nodemailer = require("nodemailer");
const router = express.Router();

const dotenv = require('dotenv')
dotenv.config({path:"./.env"})

const app = express();
app.use('/form', router);
app.use(cors());
app.use(express.json());
app.listen(80 , ()=>{console.log("Server Running at Port:80")})

const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: process.env.EMAIL,
      pass: process.env.PASSWORD
    }
})

router.post('/contact',(req, res)=>{
    const Name = req.body.FirstName + req.body.LastName;
    const Email = req.body.Email;
    const Message = req.body.Message;
    const Phone = req.body.Phone;

    const MailOptions = {
        from : Email,
        to :process.env.EMAIL,
        subject: "Contact Form Submission - Portfolio",
        html : `<p>Name: ${Name}</p>
            <p>Email: ${Email}</p>
            <p>Phone: ${Phone}</p>
            <p>Message: ${Message}</p>`,
    }
    console.log(MailOptions)

    transporter.sendMail(MailOptions, function(error){
        if (error) {
          res.json(error)
        } else {
            res.json({code:200 , msg : "Sent Successfully"})
        }
      });
});

我应该怎么做才能完成这项工作。 请建议我如何删除此内部服务器错误

Answer 1

从您的代码中，我可以看到您在反应端缺少服务器端口，它应该是http://localhost:80/form/contact NOT http://localhost/form/contact也在您已经使用 ZB439A4514C277CE6FCCC8F28 的服务器上需要在客户端上设置no-cors代码将用于一点提示 使用Postman在将其集成到客户端之前始终测试您的 API，这样您可以确定问题不是来自服务器，如果它是修复它在客户端尝试之前