500发送SendGrid + NextJS邮件时服务器错误

Question

我试图按照这个教程把一个电子邮件捕获表单在NextJS网站:https://betterprogramming.pub/how-to-create-a-working-contact-form-in-next-js-459d1fc992ea

因为它不是一个完整的联系人表单，所以我删除了除了电子邮件之外的所有字段。

我的api/contact.js是这样的:

const mail = require('@sendgrid/mail');
mail.setApiKey(process.env.SENDGRID_API_KEY);
export default async (req, res) => {
const body = JSON.parse(req.body);
const message = `
Email: ${body.email}
`;
const data = {
to: 'SENDER-EMAIL',
from: 'RECEIVER-EMAIL',
subject: `New message from ${body.email}`,
text: message,
html: message.replace(/rn/g, '<br />'),
};
await mail.send(data);
res.status(200).json({ status: 'OK' });
};

在index.js中，格式是这样的:

<form onSubmit={handleSubmit} className={styles.form}>
<label htmlFor="email">Email:</label>
<input
id="email"
type="email"
onChange={e => setEmail(e.target.value)}
/>
<button type="submit">Send</button>
</form>

表单在站点上正确显示，但是当我尝试在生产中提交电子邮件时，我得到一个500错误。我也尝试在本地主机上，得到一个错误。

我安装了sendgrid包。我也有我的秘密在。env.local.

我不知道发生了什么事。

Answer 1

这听起来像你得到一个错误，当你调用await mail.send(data)。这可能有几个原因，但首先我们应该看看如何找出错误是什么。

我们需要在try/catch块中包装发送电子邮件的调用。这样我们就可以处理错误并检查它，看看哪里出了问题。我们还可以控制对前端的响应，而不是处理默认的500处理程序。

在api/contact.js函数的底部更新为:

try {
await mail.send(data);
res.status(200).json({ status: 'OK' });
} catch (error) {
console.log(error);
if (error.response) {
console.log(error.response.body);
}
res.status(400).json({ status: "ERROR", message: error.message });
}

现在，当出现错误时，我们将错误记录到服务器日志中，并向前端返回消息。注意，该消息可能不适合用户，您可能希望自己检测错误并返回更好的消息。

现在您正在记录错误，您应该能够看到它说什么。它应该引导你到我认为是这些问题之一:

• 您的API密钥错误

  或者您设置不正确，或者您正确地将其添加到.env.local并且需要完全重新启动服务器

• 您的API密钥没有发送邮件的权限

  当你创建一个API密钥时，你可以选择给它所有的权限或者只是一个子集。请确保您的API密钥具有发送电子邮件的权限。

• 你试图从SendGrid不知道你拥有的电子邮件地址发送

  要使用SendGrid从电子邮件地址发送电子邮件，您要么需要验证电子邮件地址是您的，要么需要验证域是您的(建议对生产应用程序进行域验证)