В настоящее время возникает ошибка при попытке отправить на кнопку. Предыстория здесь заключается в том, что я создаю раздел «Свяжитесь со мной» для своего портфолио, и я использую nodemailer, чтобы это произошло. Но когда я отправляю, я сталкиваюсь с парой ошибок:
POST http://localhost:5000/403 (запрещено) Contact.js: 37 Uncaught (в обещании) SyntaxError: неожиданный конец ввода (в Contact.js: 37: 1) в дескрипторе Submit (Contact.js:37:1)
Ниже мой Contact.j для моего реагирующего приложения:
import { useState } from "react";
import { Col, Container, Row } from "react-bootstrap";
import contactImg from "../assets/img/contact-img.svg";
export const Contact = () => {
const formInitialDetails = {
firstName: '',
lastName: '',
email: '',
phone: '',
message: ''
}
const [formDetails, setFormDetails] = useState(formInitialDetails);
const [buttonText, setButtonText] = useState('Send');
const [status, setStatus] = useState({});
const onFormUpdate = (category, value) => {
setFormDetails({
...formDetails,
[category]: value
});
}
const handleSubmit = async (e) => {
e.preventDefault();
setButtonText('Sending...');
let response = await fetch("http://localhost:5000/#connect", {
mode: "no-cors",
method: "POST",
headers: {
"Content-Type": "Application/json;charset=utf-8",
},
body: JSON.stringify(formDetails),
});
setButtonText("Send");
let result = response.json();
setFormDetails(formInitialDetails);
if (result.code ===200) {
setStatus({ success: true, message: "Message sent successfully!"});
} else {
setStatus({ success: false, message: "Message was not sent. Please try again."})
}
};
return(
<section className = "contact" id = "connect">
<Container>
<Row className = "align-items-center">
<Col md = {6}>
<img src = {contactImg} alt = "Contact Us"/>
</Col>
<Col md = {6}>
<h2>Get in Touch</h2>
<form onSubmit = {handleSubmit}>
<Row>
<Col sm = {6} className = "px-1">
<input type = "text" value = {formDetails.firstName} placeholder = "First Name" onChange = {(e) => onFormUpdate('firstName', e.target.value)}/>
</Col>
<Col sm = {6} className = "px-1">
<input type = "text" value = {formDetails.lastName} placeholder = "Last Name" onChange = {(e) => onFormUpdate('lastName', e.target.value)}/>
</Col>
<Col sm = {6} className = "px-1">
<input type = "email" value = {formDetails.email} placeholder = "Email Address" onChange = {(e) => onFormUpdate('email', e.target.value)}/>
</Col>
<Col sm = {6} className = "px-1">
<input type = "tel" value = {formDetails.phone} placeholder = "Phone Number" onChange = {(e) => onFormUpdate('phone', e.target.value)}/>
</Col>
<Col size = {12} className = "px-1">
<textarea rows = "6" value = {formDetails.message} placeholder = "Message" onChange = {(e) => onFormUpdate('message', e.target.value)}/>
<button type = "submit"><span>{buttonText}</span></button>
</Col>
{
status.message &&
<Col>
<p className = {status.success === false ? "danger" : "success"}>{status.message}</p>
</Col>
}
</Row>
</form>
</Col>
</Row>
</Container>
</section>
)
}
И ниже мой файл server.js, который содержит nodemailer:
const express = require("express");
const router = express.Router();
const cors = require("cors");
const nodemailer = require("nodemailer");
// server used to send email
const app = express();
app.use(cors());
app.use(express.json());
app.use("/", router);
app.listen(5000, () => console.info("Server Running"));
console.info(process.env.EMAIL_USER);
console.info(process.env.EMAIL_PASS);
const contactEmail = nodemailer.createTransport({
service: 'yahoo',
auth: {
user: "[email protected]",
pass: "examplepassword"
},
});
contactEmail.verify((error) => {
if (error) {
console.info(error);
} else {
console.info("Ready to Send!");
}
});
router.post("/connect", (req, res) => {
const name = req.body.firstName + req.body.lastName;
const email = req.body.email;
const message = req.body.message;
const phone = req.body.phone;
const mail = {
from: name,
to: "[email protected]",
subject: "Contact Form Submission - Portfolio",
html: `<p>Name: ${name}</p>
<p>Email: ${email}</p>
<p>Phone: ${phone}</p>
<p>Message: ${message}</p>`,
};
contactEmail.sendMail(mail, (error) => {
if (error) {
res.json(error);
} else {
res.json({ code: 200, status: "Message Sent!" });
}
});
});
В моем package.json я добавил "proxy": "http://127.0.0.1:5000"
, не уверен, что это на что-то повлияло.
Это мой первый раз, когда я использую nodemailer, поэтому я хотел бы посмотреть, что я делаю неправильно, или я что-то упустил / упустил из виду? Буду очень признателен за любой отзыв!
Не уверен, что я мог делать неправильно, но хотел бы извлечь урок из этого!
Поскольку вы делаете запрос из разных источников с помощью mode: "no-cors"
, вы не сможете увидеть тело ответа, даже если сервер поддерживает CORS. Режим No-cors дает вам так называемый «непрозрачный ответ». Как следствие, response.json()
сообщает «Неожиданный конец ввода».
Вы можете попробовать это в консоли браузера на этой странице:
> await (await fetch("http://httpbin.org/json",{mode:"no-cors"})).json()
Uncaught SyntaxError: Unexpected end of input
Убедитесь, что ваш сервер localhost:5000
поддерживает CORS, и вместо этого используйте mode: "cors"
(по умолчанию). Сравните это с:
> await (await fetch("http://httpbin.org/json")).json()
{slideshow: {…}}