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 :}
왜 나에게 금지 된 오류를 주는지 잘 모르겠습니다. 여기에 정보를 더 추가해야하는지 알려주세요. 미리 감사드립니다 :)
편집 :-여기 sendgrid에서 문서를 따라 API 키를 만들고 sendGrid.setApiKey ()에서 동일하게 사용했습니다.
sendgrid에서 이메일을 보내려면 단일 발신자 확인 또는 도메인 확인을 설정해야합니다.
발신자를 확인 하려면 문서 를 확인 하세요 .
고객이 최상의 발신자 평판을 유지하고 합법적 인 발신 행위를 유지하려면 고객이 발신자 신원을 확인해야합니다. 발신자 ID는 "보낸 사람"이메일 주소 (수신자가 이메일을 보낸 사람으로 표시하는 주소)를 나타냅니다.
도메인 인증 또는 단일 발신자 확인을 사용하여 하나 이상의 발신자 ID를 확인할 수 있습니다.
API 애플리케이션 콘솔 로그에서 오류 메시지는 다음과 같아야합니다. (reactjs 측에서 실제 오류 메시지를 보려면 err.response.data
.
보낸 사람 주소가 확인 된 보낸 사람 ID와 일치하지 않습니다. 이 오류가 해결 될 때까지 메일을 보낼 수 없습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다