无法使用Sendgrid和nextjs从表单发送电子邮件

Question

我正在nextjs中创建一个请求报价表单，使用sendgrid作为发送电子邮件/提交表单请求报价的第三方api。我一直收到以下错误，我无法将表单链接到电子邮件。

error - ResponseError: Unauthorized
at node_modules/@sendgrid/client/src/classes/client.js:146:29
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
code: 401,
response: {
headers: {
server: 'nginx',
date: 'Wed, 18 Jan 2023 17:25:46 GMT',
'content-type': 'application/json',
'content-length': '116',
connection: 'close',
'access-control-allow-origin': 'https://sendgrid.api-docs.io',
'access-control-allow-methods': 'POST',
'access-control-allow-headers': 'Authorization, Content-Type, On-behalf-of, x-sg-elas-acl',
'access-control-max-age': '600',
'x-no-cors-reason': 'https://sendgrid.com/docs/Classroom/Basics/API/cors.html',
'strict-transport-security': 'max-age=600; includeSubDomains'
},
body: { errors: [Array] }
},
page: '/api/contact'
}

页面/contact.jsx

const contact = () => {
const [values, setValues] = useState({
firstName: "",
lastName: "",
phone: "",
email: "",
zip: "",
message: "",
});
const {firstName, lastName, phone, email, zip, message} = values;
const handleChange = e => 
setValues({ ...values, [e.target.name]: e.target.value });
const handleSubmit = async (e) => {
e.preventDefault()
try {
await fetch("http://localhost:3000/api/contact", {
method: "POST",
header: {
"Content-Type": "application/json",
},
body: JSON.stringify(values),
});
} catch (err) {
console.log(err);
}
};
return (
<div className='w-full h-screen'>
<div className='min-h-screen py-40 border border-gray-800 bg-white bg-gradient-to-br from-sjrblue to-sjrblue-200'>
<div className="container mx-auto">
<div className="flex flex-col lg:flex-row w-10/12 bg-white rounded-xl mx-auto shadow-lg overflow-hidden">
<div alt='loaded trailer' className='w-full h-[400px] lg:gap-5 lg:h-auto lg:w-1/2 bg-contactImage bg-cover bg-center text-center shadow-lg shadow-slate-400'></div>
{/* Request Quote Form */}
<div className="lg:w-1/2 lg:m-2 p-4 items-center">
<h2 className='text-3xl mb-4 text-center text-sjrblue'>Company Name</h2>
<p className='mb-4 text-center'>CONTACT US TODAY FOR A <span className='text-blue font-bold'>FREE</span> JUNK REMOVAL ESTIMATE</p>
<form onSubmit={handleSubmit}>
<div className='grid grid-cols-2 gap-1 md:gap-3 lg:gap-5'>
<input 
type="text" 
placeholder='first name' 
value={firstName} 
onChange={handleChange}  
required
name='firstName' 
className='border border-gray-400 py-1 px-2 shadow-lg shadow-slate-400'
/>
<input 
type="text" 
placeholder='sur name'
value={lastName}
onChange={handleChange} 
required 
name='lastName'
className='border border-gray-400 py-1 px-2 shadow-lg shadow-slate-400'
/>
</div>
<div className='mt-5'>
<input 
type="email" 
placeholder='email'
value={email}
onChange={handleChange} 
required 
name='email' 
className='text-sm border border-gray-400 py-1 px-2 w-full shadow-lg shadow-slate-400'
/>
</div>
<div className='mt-5'>
<input 
type="tel" 
id='phone-number' 
onkeydown='phoneNumberFormatter()' 
inputmode='tel' 
placeholder='phone number 123-456-7890' 
pattern='[0-9]{3}-[0-9]{3}-[0-9]{4}' 
value={phone}
onChange={handleChange} 
required 
name='phone' 
className='text-sm border border-gray-400 py-1 px-2 w-full shadow-lg shadow-slate-400'
/>
</div>
<div className='mt-5'>
<input 
type="text" 
inputmode='numeric' 
placeholder='zip code' 
maxLength={5}
value={zip}
onChange={handleChange} 
name='zip' 
required 
className='text-sm border border-gray-400 py-1 px-2 w-full shadow-lg shadow-slate-400'
/>
</div>
<div className='mt-5'>
<textarea 
name="message" 
placeholder='message' 
id="" cols="30" 
rows="10" 
value={message}
onChange={handleChange}  
required 
className='text-sm border border-gray-400 py-1 px-2 w-full shadow-lg shadow-slate-400'>  
</textarea>
</div>
<div className='mt-5 text-center'>
<input type="checkbox" required className='border border-gray-400 w-3 h-3'/>
<span className='px-3 text-sm'>I am not a robot</span>
<div className='mt-5'>
<button className='bg-sjrblue w-full text-enter text-white py-3 rounded  hover:bg-blue-700  duration-300 shadow-lg shadow-slate-400'>Get your FREE estimate</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>  

页面/api/contact.js

require("dotenv").config();
const sgMail = require("@sendgrid/mail");
const { SG_API_KEY, FROM_EMAIL, TO_EMAIL } = process.env;
sgMail.setApiKey(SG_API_KEY);
export default async function handler(req, res) {
const {firstName, lastName, phone, email, zip, message} = req.body;
const msg = {
to: TO_EMAIL,
from: FROM_EMAIL,
subject: '',
html: `<p><strong>First Name: </strong>${firstName}</p>
<p><strong>Last Name: </strong>${lastName}</p>
<p><strong>Phone Number: </strong>${phone}</p>
<p><strong>Email: </strong>${email}</p>
<p><strong>Zip: </strong>${zip}</p>
<p><strong>Message: </strong>${message}</p>
`,
};
await sgMail.send(msg);
console.log('email sent');
res.status(200).json({ success: true  });

根文件中有一个。env文件

SG_API_KEY= #API Key
TO_EMAIL=  #verified email
FROM_EMAIL= #email to send form to

请帮忙!提前感谢!

Answer 1

这里是Twilio开发者布道者。

因为这是一个401错误，我认为这是一个问题，你如何设置你的API键在环境变量

要设置环境变量，可以使用以下3个命令:

echo "export SENDGRID_API_KEY='YOUR_API_KEY'" > sendgrid.env
echo "sendgrid.env" >> .gitignore
source ./sendgrid.env

您也可以在SendGrid控制台中更改API密钥设置为完全访问，或者它可能是不正确的API密钥，因此您也可以生成一个新的。