CODEWITHSUNDEEP
node.jssendgrid
xsccmx
xsccmx

Reputation: 77

Nodejs SendGrid CORS request blocked

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!

Upvotes: 6

Views: 6300

Answers (2)

Marty McGee
Marty McGee

Reputation: 774

Sending directly from a browser frontend (React) app is not allowed. (CORS will block the request.) You need to create a Node.js server (I use Next JS) and handle the sending of email (via SendGrid API) from your server. Here are two really good tutorials on how to handle this:

Using SendGrid:

https://docs-git-success-185-add-nextjs-sengrid-guide.zeit.now.sh/guides/deploying-nextjs-nodejs-and-sendgrid-with-zeit-now

Using Nodemailer:

https://medium.com/the-couch/adding-a-contact-form-to-your-next-js-app-7a1b5f63f27

Upvotes: 5

D. Richard
D. Richard

Reputation: 472

You need to create a Node.js server and call SendGrid in server. Then, call your server from React instead of calling SendGrid directly from React.

https://sendgrid.com/docs/for-developers/sending-email/cors/

Browser-Only Applications
When you have a browser-only application that reaches out to APIs, the API key has to be embedded in the application. Anyone with access to a browser-only application can access all of the Javascript source code, including your API keys.

Making your API key publicly accessible could result in anyone authenticating API calls with your API key — this is a significant security concern both for you and SendGrid.

Workarounds
You can create a server-based application, which will protect your API keys from being released to the world. Languages like NodeJS, PHP, Ruby, Python, C#, Go, and Java, and others can be implemented to make calls to the API from the security of a locked down server environment.

Upvotes: 0

Related Questions