Nodejs SendGrid CORS 请求被阻止

Question

我对 Node.js、react 等并不精通，遇到以下问题：

我有一个在提交时从网页上的表单调用的函数，看起来像这样（出于隐私目的，我省略了一些细节）：

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!");

}

当检查我的收件箱中由上述表格生成的测试电子邮件时，我不仅没有看到任何电子邮件，网络浏览器还会给出以下消息：

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).

我从npm 安装了cors 和@sendgrid/mail，尽管看到其他人在YouTube 上实现它，但我似乎无法弄清楚如何将上述内容应用于此api 调用。

谢谢！

Answer 1

不允许直接从浏览器前端 (React) 应用发送。 （CORS 将阻止请求。）您需要创建一个 Node.js 服务器（我使用 Next JS）并处理从您的服务器发送电子邮件（通过SendGrid API）。这里有两个关于如何处理这个问题的非常好的教程：

使用 SendGrid：

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

使用 Nodemailer：

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

Answer 2

您需要创建一个 Node.js 服务器并在服务器中调用 SendGrid。然后，从 React 调用 你的 服务器，而不是直接从 React 调用 SendGrid。

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.