Authorization/CORS 使用 Gatsby 函数设置 sendgrid 表单时出现问题

Question

我正在尝试设置一个表单，使用 sendgrid 和 Gatsby 函数将信息发送到我的电子邮件。我试过遵循 gatsby sendgrid example, and the youtube video "four real world solutions using gatsby functions..." 但两者都得到了 authorization/CORS 错误：

*控制台错误 *response.body.errors *经过验证的单一发件人

我尝试了一些方法，例如：

在我的函数周围添加 cors middleware（虽然我不是 100% 做对了）
设置res.set({"Content-Type": "application/json" Authorization: `Bearer ${process.env.SENDGRID_API_KEY}` });
设置res.setHeader('Access-Control-Allow-Origin', '*')
正在创建新的 api 键
测试 gatsby 开发和构建，清除缓存等

我运行没有想法，所以任何建议将不胜感激:)

当前表格的代码和 api 如下：

src/api/sendgrid.js

const sgMail = require('@sendgrid/mail')
console.log("api key:" + process.env.SENDGRID_API_KEY, process.env.SENDGRID_AUTHORIZED_EMAIL)
sgMail.setApiKey(process.env.SENDGRID_API_KEY)


export default async (req, res) => {
    res.set({"Content-Type": "application/json",
    Authorization: `Bearer ${process.env.SENDGRID_API_KEY}`
    });
    const msg = {
        to: 'myemail@gmail.com', // Change to your recipient
        from: process.env.SENDGRID_AUTHORIZED_EMAIL, // Change to your verified sender
        subject: 'Sending with SendGrid is Fun',
        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)
      .then(() => {
          console.log('Email sent'); console.log(msg);
      })
      .catch((error) => {
          
          console.error(error);console.log('there was an error');
          return res.status(500).json({
              error: error.response,
          })
          
      })

      return res.status(200)
    

}

src/pages/components/contact.js

const Contact = () => {

    const [serverState, setServerState] = useState({
        formSent: false,
    });

    const {
        register,
        handleSubmit,
        formState: { errors },
      } = useForm()
      const onSubmit = data => {
        fetch(`/api/sendgrid`, {
          method: `POST`,
          body: JSON.stringify(data),
          headers: {
            "content-type": `application/json`,
          },
        })
          .then(res => res.json())
          .then(body => {
            console.log(`response from API:`, body);
          })
      }
    
      console.log({ errors })
    return(
        <div style={{ display: "grid", width: "100%", }} id="contactSection" >


      
        <div
            style={{
            // By using the same grid area for both, they are stacked on top of each other
            gridArea: "1/1",
            position: "relative",
            // This centers the other elements inside the hero component
            placeItems: "center",
            display: "grid",
            width: "100%",
            }}
        >

        <ContactDiv>
        {/* class={serverState.formSent ? "sent" : ""} */}
            <span 
            // css={styles(serverState.formSent)}
            >
                <h1>Message Sent</h1>
                <p>I'll be in touch shortly. Regards, Daniel.</p>
            </span>
            {/* <MobileId id="contactM"/> */}
            <h1 id="contactM">Need a Website?</h1>
            <ContactInfo>
            <p>For a free project consultation call, email or use the form below.</p>
            <p>Mobile:<br/> 022 078 0868</p>
            <p>Email:<br/> daniel@thoughtfulhq.com</p>
            </ContactInfo>
            <div>
                <form 
                onSubmit={handleSubmit(onSubmit)}
                // action="/api/sendgrid" method="POST"
                >
                    <label htmlFor="name">
                            <p>Name:</p>
                            <input 
                                type="text" 
                                name="name" 
                                required  
                                {...register("Name", { required: true, maxLength: 100 })}  
                            />
                    </label>
                    <label htmlFor="email">
                        <p>Email:</p>
                        <input 
                            type="email" 
                            name="email" 
                            required
                            {...register("Email", { required: true, pattern: /^\S+@\S+$/i })}
                        />
                    </label>
                    <label htmlFor="message">
                        <p>Project Details:</p>
                        <textarea 
                            name="message" 
                            id="message" 
                            rows="5" 
                            required
                            {...register("Message", { required: true, maxLength: 2000 })} 
                        />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </ContactDiv>
        </div>
        </div>
    )
    
}

export default Contact;

Answer 1

此处为 Twilio SendGrid 开发人员布道师。

正如我们在评论中发现的那样，您的 SendGrid API 密钥被错误地存储在您的 .env 文件中。环境变量应存储在每个变量的新行中，变量名称和值之间没有空格，例如：

SENDGRID_API_KEY=SG.xxx
SENDGRID_AUTHORIZED_EMAIL=sender@example.com

作为额外说明，您不应在对 front-end 请求的响应中设置 Authorization header。这会将您的 SendGrid API 密钥暴露给使用该表单的任何人，如果他们调查响应 headers。我建议删除该行：

    res.set({"Content-Type": "application/json",
      Authorization: `Bearer ${process.env.SENDGRID_API_KEY}`
    });

来自 src/api/sendgrid.js.

Authorization/CORS 使用 Gatsby 函数设置 sendgrid 表单时出现问题

Authorization/CORS issue setting up sendgrid form with Gatsby Functions

forms

authentication

node.js

sendgrid

gatsby