Nodejs SendGrid CORS 请求被阻止

Question

我不太熟悉 Node.js、react 等，并且有以下问题：

\n\n

我有一个从网页上的表单提交时调用的函数，如下所示（出于隐私目的，我省略了一些详细信息）：

\n\n

class Email extends React.Component{\n\nconstructor(props){\n    super(props);\n\n    this.state = {\n        subject: "",\n        message: ""\n    };\n\n}\n\nhandleUpdateSubjectLine(evt){\n    this.setState({ subject: evt.target.value});\n}\n\nhandleUpdateMessageBox(evt){\n\n    this.setState({ message: evt.target.value});\n}\n\n\nasync handle_email(evt){\n\n\n    var sgMail = require(\'@sendgrid/mail\');\n    var subject = this.state.subject;\n    var message = this.state.message;\n    sgMail.setApiKey(process.env.SENDGRID_API_KEY);\n    console.log("subject txt: " + subject);\n    console.log("msg txt: " + message);\n    var msg = {\n       to: \'OMMITED\',\n       from: \'OMMITED\',\n       subject: subject,\n       text: message,\n    };\n\n    sgMail.send(msg).catch(err =>{\n        console.log(err);\n    });\n    console.log("Message Allegedly Sent!");\n\n}\n

\n\n

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

\n\n

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.sendgrid.com/v3/mail/send. (Reason: CORS header \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 does not match \xe2\x80\x98https://sendgrid.api-docs.io\xe2\x80\x99).

\n\n

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

\n\n

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

\n\n

谢谢！

\n

Answer 1

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

使用发送网格：

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