POST http://localhost:5000/ 403 (Запрещено) ошибка

В настоящее время возникает ошибка при попытке отправить на кнопку. Предыстория здесь заключается в том, что я создаю раздел «Свяжитесь со мной» для своего портфолио, и я использую 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, поэтому я хотел бы посмотреть, что я делаю неправильно, или я что-то упустил / упустил из виду? Буду очень признателен за любой отзыв!

Не уверен, что я мог делать неправильно, но хотел бы извлечь урок из этого!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
247
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку вы делаете запрос из разных источников с помощью 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: {…}}

Другие вопросы по теме