获取“；TypeError:无法获取”；在ReactJS项目上使用SendGrid发送电子邮件时

我正在尝试在ReactJS项目中使用SendGrid发送电子邮件

这是我的作品：

//Email.js
import React from 'react'      

const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const msg = {
 to: 'aaaaa@gmail.com',
 from: 'bbbb@gmail.com',
 subject: 'This is a test mail',
 text: 'and easy to do anywhere, even with Node.js',
 html: '<strong>and easy to do anywhere, even with Node.js</strong>',
};

 sgMail.send(msg).catch(error => {alert(error.toString()); });

export const Email= () => (
        <h1>Email Sending Page</h1>
)

//Email.js
从“React”导入React
const sgMail=require（'@sendgrid/mail'）；
sgMail.setApiKey（process.env.SENDGRID\u API\u KEY）；
常数msg={
致：'aaaaa@gmail.com',
发件人：'bbbb@gmail.com',
主题：“这是一封测试邮件”，
text:'在任何地方都很容易，即使使用Node.js'，
html:“并且在任何地方都可以轻松操作，即使使用Node.js”，
};
sgMail.send（msg.catch）（错误=>{alert（error.toString（））；}）；
导出常量电子邮件=（）=>(
电子邮件发送页面
)

当我试图在本地主机上运行带有“npm start”的应用程序时，电子邮件未发送，我收到错误消息“TypeError:Failed to fetch”

但是，如果我使用此代码：

//Email.js
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const msg = {
 to: 'aaaaa@gmail.com',
 from: 'bbbb@gmail.com',
 subject: 'This is a test mail',
 text: 'and easy to do anywhere, even with Node.js',
 html: '<strong>and easy to do anywhere, even with Node.js</strong>',
};

sgMail.send(msg)

//Email.js
const sgMail=require（'@sendgrid/mail'）；
sgMail.setApiKey（process.env.SENDGRID\u API\u KEY）；
常数msg={
致：'aaaaa@gmail.com',
发件人：'bbbb@gmail.com',
主题：“这是一封测试邮件”，
text:'在任何地方都很容易，即使使用Node.js'，
html:“并且在任何地方都可以轻松操作，即使使用Node.js”，
};
sgMail.send（msg）

然后执行以下命令：“node Email.js”发送邮件。它只能这样工作，我不明白为什么

我尝试了我能找到的任何解决方案，但没有任何效果

（为了测试，我甚至尝试将api_键硬编码到代码中，得到了相同的结果）。

EDIT

环顾四周后，我发现您不能使用Sendgrid直接从浏览器发送电子邮件

Sendgrid不允许您在中直接使用Javascript发送电子邮件 浏览器

您需要进行服务器设置，并使用服务器发送 改为电子邮件（使用您最喜欢的后端框架/语言， Node.js、php、Java等）

发送邮件的步骤与此类似：

在React应用程序中写入电子邮件详细信息

向发送POST请求 包含电子邮件数据的服务器端点（例如/sendmail） （收件人、标题、内容等）在服务器中接收电子邮件数据，并

将其发送到Sendgrid api这里是Sendgrid的官方文档 关于CORS政策：

资料来源：

编辑2

如果您想在不实际构建和部署服务器的情况下实现Sendgrid，那么可以使用一个简单的免费主机

我知道这看起来很吓人，但实际上很容易。另外，我只是很快地把这些放在一起，所以如果有什么不适合你的话，给我一个评论

请按照屏幕上的步骤1-3进行操作。这非常简单，最终安装了firebase tools CLI

在命令行/终端上导航到项目中的

functions/

文件夹

在functions文件夹中安装Sendgrid和cors库

在项目中使用以下命令将Sendgrid API密钥添加到firebase环境：

将其复制到

函数/index.js

文件中：

保存它并在命令行上运行

firebase deploy--only函数。您的函数现在应该在
https://us-central1-.cloudfunctions.net/sendEmail

现在将您的React文件更改为：

//Email.js
从“React”导入React，{useffect}
导出常量电子邮件=（）=>{
useffect（（）=>{
const sendmail=async（）=>{
常数msg={
致：'aaaaa@gmail.com',
发件人：'bbbb@gmail.com',
主题：“这是一封测试邮件”，
text:'在任何地方都很容易，即使使用Node.js'，
html:“并且在任何地方都可以轻松操作，即使使用Node.js”，
}; 
const response=等待获取(
'https://us-central1-FIREBASE-PROJECT-ID-HERE.cloudfunctions.net/sendEmail', {
方法：“POST”，
正文：JSON.stringify（msg），
标题：{
“内容类型”：“应用程序/json”
}
});
控制台日志（“响应”，响应）；
}
sendmail（）；
}, []);
返回电子邮件发送页面
}

就这样！你基本上有一个服务器端的功能，而没有使服务器和它的免费

---

如果您不想投入工作，请随时忽略此问题，但如果您需要任何帮助，请告诉我。

啊，这似乎是不可能的，请查看我编辑的答案。非常感谢。所有的电子邮件库都有相同的行为吗？或者有任何可以直接在浏览器中发送电子邮件的功能？大多数库都需要服务器请求才能发送电子邮件，以防止垃圾邮件和黑客攻击。我将再次编辑我的帖子，使用一种简单的方法来实现Sendgrid电子邮件发送，而无需运行其他服务器。我添加了一个解释，说明了我知道如何以无服务器方式发送电子邮件的最简单方法，如果有帮助，请告诉我！非常感谢你的帮助，我一定会尝试一下，让你知道。

npm i @sendgrid/mail cors

firebase functions:config:set sendgrid.key="THE API KEY"

const functions = require("firebase-functions");
const cors = require("cors")({ origin: true });
const sgMail = require("@sendgrid/mail");

exports.sendEmail = functions.https.onRequest((req, res) => {
    sgMail.setApiKey(functions.config().sendgrid.api);

    return cors(req, res, () => {
        const { msg } = req.body;

        sgMail.send(msg).catch(error => {
            alert(error.toString());
        });

        res.status(200).send(msg);
    });
});

//Email.js

import React, { useEffect } from 'react'      

export const Email= () => {
  useEffect(() => {
    const sendEmail = async() => {
      const msg = {
        to: 'aaaaa@gmail.com',
        from: 'bbbb@gmail.com',
        subject: 'This is a test mail',
        text: 'and easy to do anywhere, even with Node.js',
        html: '<strong>and easy to do anywhere, even with Node.js</strong>',
      }; 

      const response = await fetch(
        'https://us-central1-FIREBASE-PROJECT-ID-HERE.cloudfunctions.net/sendEmail', {
        method: 'POST',
        body: JSON.stringify(msg),
        headers: {
          'Content-Type': 'application/json'
        }
      });

      console.log("response", response);
    }

    sendEmail();
  }, []);

  return <h1>Email Sending Page</h1>
}