POST http://localhost:3000/api/contactus 404（未找到）！！！我不明白

Posted 2023-03-25

【中文标题】POST http://localhost:3000/api/contactus 404（未找到）！！！我不明白

【英文标题】：POST http://localhost:3000/api/contactus 404 (Not Found) !!! I do not understand

【发布时间】：2018-09-09 23:43:11

【问题描述】：

我对 Web 开发非常陌生。我正在尝试制作一个与我们联系的表单，当用户单击提交时，表单的内容应发送到电子邮件。 我关注了这个 youtube 视频：https://www.youtube.com/watch?v=EPnBO8HgyRU

当我尝试通过 Postman 发布到我的后端 url (http://localhost:3001/api/contactus) 时，它确实会发送一封电子邮件，但所有 'req.body' 都在电子邮件中返回未定义。当我从前端联系我们表单发帖时，我在控制台中收到此错误：console error

我不明白我做错了什么。正如我所说，我是 Web 开发的新手。我正在学习，所以我不知道我不知道什么，因此我相信这可能是一个非常简单的解决方法，但它超出了我的范围。

这是我认为当我引入“axios”时出现问题的表单的前端代码。

async handleSubmit(e) 

  e.preventDefault();

  const err = this.validateForm();
  if (err) 

    if (this.state.userName.length < 2) 
      this.setState(
         userNameError: true,
      );
    

    if (this.state.email.indexOf("@") === -1) 
      this.setState(
         emailError: true,
      );
    


    if (this.state.subject.length < 2) 
      this.setState(
         subjectError: true,
      );
      

     if (this.state.message.length < 2) 
       this.setState(
          messageError: true,
       );
      
  

  if (!err) 

  const finalForm = 
    userName: this.state.userName,
    email: this.state.email,
    subject: this.state.subject,
    message: this.state.message,
  ;

  if (this.state.imagePreviewUrl) 

    let newFileName = this.state.fileName.replace(/^C:\\fakepath\\/, "");

    finalForm.attachments = [
      filename: newFileName,
      content: this.state.imagePreviewUrl.split("base64,")[1],
      encoding: 'base64',
    ]
 


const contactus = await axios.post('/api/contactus', finalForm)

  this.handleFormClear(e);
  this.setState(
    formSubmit: true,
  );

我还希望 const contactus 为“req.body”采用“finalForm”，但由于某种原因不起作用。帮助:(

这是我的后端代码：

const express = require('express')
const bodyParser = require('body-parser')
const nodemailer = require('nodemailer')
const Form = express()

Form.use(bodyParser.json())
Form.use(bodyParser.urlencoded( extended: false))
Form.post('/api/contactus', (req, res) => 
  console.log(req.body);

const htmlEmail = `
<h3>Contact Details</h3>
<ul>
  <li>Name:$req.body.userName</li>
  <li>Email:$req.body.email</li>
  <li>Subject$req.body.subject</li>
</ul>
<h3>Messages</h3>
<p>$req.body.message</p>
`

const transporter = nodemailer.createTransport(
 host: 'smtp.gmail.com',
 port: 465,
 secure: true,
 auth: 
   user: '[e-mail]',
   pass: 'xxxxxxxx',
 


  );

   const mailOptions = 
     from: req.body.userEmail,
     to: '[e-mail]',
     subject: req.body.subject,
     text: req.body.userMessage + '\n\n' + "Send your response to: " + req.body.userEmail,
     html: htmlEmail,
     attachments: req.body.attachments && req.body.attachments
   ;

   transporter.sendMail(mailOptions, (error, info) => 
     if (error) 
       console.log(error.message)
      else 
         console.log('Message Sent: %s' , info.message)
         console.log('Message URL: %s', nodemailer.getTestMessageUrl(info))
     
   );

)

const PORT = process.env.PORT || 3001

Form.listen(PORT, () => 
  console.log(`Server listening on port $PORT`)
)

请帮忙。谢谢！

新的错误图片：updated error

【问题讨论】：

根据 SO 指南，所有错误消息都必须以文本形式输入，而不是以图像形式发布。这允许人们将消息复制粘贴到搜索引擎中，并且更容易阅读。图像中的文本可能难以阅读，尤其是在移动设备上。此外，图像使用更多日期，这对许多人来说可能是移动设备上的一个问题。你可以edit你发帖修复。更多信息请访问help section

【参考方案1】：

我从您的错误中看到，您调用的是 localhost:3000 而不是 localhost:3001

【讨论】：

是的，我也看到了这个，我该如何改变这个？据我所知，我似乎有一个前端 url (localhost 3000) 和后端 url (localhost: 3001)。我很迷惑。感谢您到目前为止的回答！

@kadddeee 如果您可以访问前端，请转到您执行此请求的地方并更改端口。这一切都取决于你是如何做到的。但我相信这是您配置 axios 的地方。在您设置 baseURL: '...' 的地方，将端口更改为 3001

@AlexSrc 嗯，我照你说的做了，但它只是给了我一个错误:(。我不明白我的终端确实说：[nodemon] 由于更改而重新启动... [0 ] [nodemon] 开始节点 index.js [0] 服务器侦听端口 3001 ..... 所以不明白为什么它不会显示该 url。如果你在顶部查看我的前端代码，当你向下滚动时在底部，您将看到“const contact us”，其中我为 axios 定义了 url。那里有问题吗？

@kadddeee 您是否为它创建了一个配置对象，并在其中指定要调用哪个链接？试着像这样打电话const contactus = await axios.post('http://localhost:3001/api/contactus', finalForm)

再次感谢您的回复@AlexSrc。我对您的建议有一个新错误，请查看我上面的帖子以获取图片，谢谢！

【参考方案2】：

我也遵循了本教程并遇到了类似的问题。为我解决的问题是运行我的客户端并在终端中使用命令npm run dev 同时提供服务。这是假设在你的projectName\package.json 中有一个dev 的脚本（它在教程中大约 5:20 https://www.youtube.com/watch?v=EPnBO8HgyRU&t=542s）。如果这不能立即解决您的问题，请尝试解决终端中出现的任何其他警告或错误，然后重新运行该命令。

【参考方案3】：

原帖最底部链接的图片中的错误说明了问题：

Failed to load http://localhost:3001/api/contactus: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

这是一个cross-origin resource sharing 问题。本质上，当您尚未在 Express JS 服务器中启用此功能时，您正试图从另一个域 (localhost:3000) 访问来自一个域 (localhost:3001) 的资源。

您可以在此处了解如何设置 Express JS 以允许 CORS：

https://www.w3.org/wiki/CORS_Enabled#In_ExpressJS

【参考方案4】：

你需要使用3001端口

axios.post('http://localhost:3001/api/contactus', finalForm)