I am not well-versed in Node.js, react, etc and have the following issue:
I have a function that is called on submit from a form on a webpage that looks like this (I have omitted some details for privacy purposes):
class Email extends React.Component{
constructor(props){
super(props);
this.state = {
subject: "",
message: ""
};
}
handleUpdateSubjectLine(evt){
this.setState({ subject: evt.target.value});
}
handleUpdateMessageBox(evt){
this.setState({ message: evt.target.value});
}
async handle_email(evt){
var sgMail = require('@sendgrid/mail');
var subject = this.state.subject;
var message = this.state.message;
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
console.log("subject txt: " + subject);
console.log("msg txt: " + message);
var msg = {
to: 'OMMITED',
from: 'OMMITED',
subject: subject,
text: message,
};
sgMail.send(msg).catch(err =>{
console.log(err);
});
console.log("Message Allegedly Sent!");
}
When checking my inbox for the test email produced by the above form, not only do I not see any email, the web browser would give the following messages:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.sendgrid.com/v3/mail/send. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://sendgrid.api-docs.io’).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.sendgrid.com/v3/mail/send. (Reason: CORS request did not succeed).
I have cors and @sendgrid/mail installed from npm and can't seem to figure out how to apply the above to this api call despite watching others implement it on YouTube.
Thanks!