Недавно я закончил учебный курс по программированию и работаю над своим веб-портфолио React. Я хочу добавить контактную форму, которая принимает имя посетителя, адрес электронной почты и сообщение, а затем отправляет мне эту информацию по электронной почте. С этой целью я следовал руководству (https://www.youtube.com/watch?v=tqmLxgvof70&list=PLnpdZyv-BjINbUjmTUsyziHz_4fa9hM5G&). Однако я получаю сообщение об ошибке...
Error: Network Error ContactPage.js:56
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)
POST http://localhost:3030/api/email net::ERR_CONNECTION_REFUSED xhr.js:177
Ошибка может быть прослежена до этого Axios.post...
Axios.post("http://localhost:3030/api/email", this.state)
.then((res) => {
if (res.data.success) {
this.setState({
disabled: false,
emailSent: true,
});
} else {
this.setState({
disabled: false,
emailSent: false,
});
}
})
.catch((err) => {
console.log(err);
this.setState({
disabled: false,
emailSent: false,
});
});
Я не уверен, что происходит не так, любая помощь будет оценена.
Вот некоторый внутренний код.
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const sendGrid = require("@sendGrid/mail");
const app = express();
app.use(bodyParser.json());
app.use(cors());
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PUT, PATCH, DELETE"
);
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
next();
});
app.get("/api", (req, res, next) => {
res.send("API Status: Running");
});
app.post("/api/email", (req, res, next) => {
// sendGrid.setApiKey('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');
sendGrid.setApiKey(process.env.SENDGRID_API_KEY);
const msg = {
to: "[email protected]",
from: req.body.email,
subject: "Portfolio Contact",
text: req.body.message,
};
sendGrid
.send(msg)
.then((result) => {
res.status(200).json({
success: true,
});
})
.catch((err) => {
console.log("error: ", err);
res.status(401).json({
success: false,
});
});
});
app.listen(3030, "0.0.0.0");
