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: '[email protected]',
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)"
proto:Error {constructor:、toString:、toJSON:}
なぜそれが私にForbiddenエラーを与えるのかわからない。ここに情報を追加する必要がある場合はお知らせください。前もって感謝します :)
編集:-ここのsendgridのドキュメントに従ってAPIキーを作成し、sendGrid.setApiKey()で同じキーを使用しました。
Sendgridからメールを送信できるようにするには、単一送信者検証またはドメイン検証をセットアップする必要があります。
docs をチェックして、送信者を確認してください。
お客様が可能な限り最高の送信者評価を維持し、正当な送信動作を維持するために、お客様に送信者IDを確認することを要求します。送信者IDは「差出人」のメールアドレスを表します。受信者がメールの送信者として表示するアドレスです。
ドメイン認証または単一送信者検証のいずれかを使用して、1つ以上の送信者IDを検証できます。
APIアプリケーションコンソールログでは、エラーメッセージは次のようにする必要があります(reactjs側で実際のエラーメッセージを表示するには、err.response.data
を使用する必要があります。
差出人アドレスが確認済みの送信者IDと一致しません。このエラーが解決されるまでメールを送信できません。