我正在设计一个联系人页面,其中使用React呈现UI。我有一个表单,应该在提交时发送电子邮件。这是用于处理提交的UI代码:
handleSubmit = (event) => {
event.preventDefault();
this.setState({
disabled: true
});
Axios.post('http://localhost:3040/api/email', this.state)
.then( res => {
if(res.data.success){
this.setState({
disabled: false,
emailSent: true
});
} else{
this.setState({
disabled: false,
emailSent: false
});
}
})
.catch(err => {
this.setState({
disabled: false,
emailSent: false
});
});
}
用于发送电子邮件的api是用Node.js编写的。使用@ sendgrid // mail触发发送。在调试时,我可以看到表单值已到达api,但在发送时会抛出403 Forbidden错误。这是api代码:
app.post('/api/email', (req, res, next) => {
sendGrid.setApiKey('<Generated key in sendgrid>');
const msg = {
to: 'some@email.com',
from: req.body.email,
subject: 'Website Contact Page',
text: req.body.message
}
sendGrid.send(msg).then(result => {
res.status(200).json({
success: true
});
})
.catch(err => {
console.log('error: ', err);
res.status(401).json({
success: false
});
});
});
以下是调试时在VSCode控制台中遇到的错误跟踪:
stack:"Error: Forbidden
at axios.then.catch.error (c:\react\portfolio-api\node_modules\@sendgrid\client\src\classes\client.js:105:29)
at process._tickCallback (internal/process/next_tick.js:68:7)"
协议:错误{构造函数:,toString:,toJSON:}
不知道为什么会给我“禁止的”错误。如果需要在此处添加更多信息,请告诉我。在此先感谢:)
编辑:- 按照sendgrid上的文档来创建API密钥,并在sendGrid.setApiKey()中使用了该密钥。
答案 0 :(得分:7)
要能够从sendgrid发送电子邮件,您需要设置“单一发件人验证”或“域验证”。
请检查docs以验证发件人。
确保我们的客户保持最佳的发件人信誉 为了维护合法的发送行为,我们要求客户 验证其发件人身份。发件人身份代表您 “发件人”电子邮件地址-收件人的地址将显示为 您的电子邮件发件人。
您可以使用任一域来验证一个或多个发件人身份 身份验证或单一发件人验证。
在api应用程序控制台日志中,错误消息必须如下所示:
(要在reactjs端查看真正的错误消息,您需要使用err.response.data
。
发件人地址与验证的发件人身份不匹配。邮件 在解决此错误之前无法发送。