Получение «TypeError: не удалось получить» при отправке электронного письма с SendGrid в проекте ReactJS - PullRequest
Новая
       12

Получение «TypeError: не удалось получить» при отправке электронного письма с SendGrid в проекте ReactJS

0 голосов
/ 28 октября 2019

Я пытаюсь отправить электронное письмо с SendGrid в проекте ReactJS.

Это мой компонент: 

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

Когда я пытаюсь запустить приложение с «npm start» на localhost, электронное письмо не отправлено, и я получил сообщение об ошибке «Ошибка ввода: Не удалось получить».

Но, если я использую этот код: 

//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 "почта отправлена. Это работает только так, и я не могу понять, почему.

Я пытался найти любое решение, которое смог найти, но ничего не работает.

(Я даже пытался ввести в коде жестко закодированный ключ api_key только длятест, и я получил тот же результат).

1 Ответ

0 голосов
/ 29 октября 2019

РЕДАКТИРОВАТЬ

После осмотра я обнаружил, что вы не можете использовать Sendgrid для отправки электронной почты прямо из браузера.

Sendgrid выиграноне позволяйте отправлять электронную почту напрямую, используя Javascript в браузере.

Вам потребуется настроить сервер и использовать сервер для отправки электронной почты вместо этого (используя вашу любимую серверную среду / язык,Node.js, php, Java и т. Д.).

Шаги по отправке почты будут аналогичны следующим:

  1. Запись сведений электронной почты в приложении React
  2. Отправьте запрос POST на конечную точку вашего сервера (например, / sendemail) с данными электронной почты (получатель, заголовок, содержимое и т. Д.) Получите данные электронной почты на сервере и
  3. отправьте их в Sendgrid api Здесьофициальная документация Sendgrid относительно их политики CORS: https://sendgrid.com/docs/for-developers/sending-email/cors/

Источник: React не может отправить электронное письмо с SendGrid

EDIT2

Если вы хотите реализовать Sendgrid сДля создания и развертывания сервера вы можете использовать простую функцию Firebase , которая может свободно размещаться.

Я знаю, что это может показаться пугающим, но в действительности это довольно просто. Кроме того, я просто очень быстро все собрал, поэтому, если у вас ничего не получится, напишите мне комментарий.

  1. Выполните шаги 1-3 на странице начала работы с функциями firebase . Это довольно просто, и вы в конечном итоге с установленным интерфейсом командной строки Firebase Tools.
  2. Перейдите в папку functions/ внутри вашего проекта в командной строке / терминал.
  3. Установите библиотеки Sendgrid и corsв папке функций 
npm i @sendgrid/mail cors
Добавьте ваш ключ API Sendgrid в вашу среду Firebase с помощью следующей команды в вашем проекте: 
firebase functions:config:set sendgrid.key="THE API KEY"
Скопируйте это в ваш functions/index.js файл: 
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);
    });
});

Сохраните его и запустите firebase deploy --only functions в командной строке. Теперь ваша функция должна быть активна на https://us-central1-<project-id>.cloudfunctions.net/sendEmail

Теперь измените ваш файл React на: 

//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>
}

И это все! По сути, у вас есть функция на стороне сервера без создания сервера и его бесплатное!

Не стесняйтесь игнорировать это, если вам не хочется работать, но если вам нужна помощь, дайте мне знать.

...