Как исправить ошибку 404 (Not Found) при соединении клиентской и серверной части в React?

Question

Люсьен

javascript , node.js , react

Как исправить ошибку 404 (Not Found) при соединении клиентской и серверной части в React?

При объединении серверной и клиентской частей на одном хосте возникает ошибка при попытке отправить заявку обратной связи на почту. Необходимо исследовать и устранить причину ошибки. Вот пример кода:

```javascript
// Серверная часть server.js
const express = require('express');
const nodemailer = require('nodemailer'); 

const server = express();

server.use(express.static(__dirname + '/public'));
server.use(express.json());

server.get('/', (req, res) => {
    res.sendFile("public/index.html", { root: __dirname})
});

server.post("/api/feedback", async(req, res) => {
    try {
        const transporter = nodemailer.createTransport({
            host: "smtp.mail.ru",
            port: 465,
            secure: true,
            auth: {
                user: "ya@mail.ru",
                pass: "**********"  
            }
        });   
        
        const { name, phone, message} = req.body;

        await transporter.sendMail({
            from: "ya@mail.ru",
            to: "ya@mail.ru",
            subject: "Тема письма",
            text: `${name} ${phone} ${message}`,
            html: `
                <p>${name}</p>
                <p>${phone}</p>
                <p>${message}</p>
            `
        });

        return res.status(200).send({
            status: 200,
            message: 'Успешная отправка'
        });

    } catch (e) {
        return res.status(500).send({
            status:500,
            message: 'Ошибка при запросе'
        });
    } 
});

server.listen(5000, () => {
    console.log('listening on port 5000'); 
});


// Клиентская часть script.js
const FEEDBACK_FORM = document.querySelector('#feedback-form');

function sendFeedback(feedbackData) {
    // Добавьте код обработчика отправки данных
}
```

Как можно улучшить код или проверить причину возникновения ошибки?

14 августа 2024 г. 5:43

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для исправления ошибки 404 (Not Found) при отправке запроса на серверную часть из клиентской части в React, необходимо убедиться, что адрес запроса указан правильно. В данном случае, вы отправляете POST запрос на '/api/feedback', но в серверной части вы указали только '/feedback'. Для исправления этой проблемы, вам нужно изменить адрес запроса на '/feedback' в клиентской части.

Кроме того, убедитесь, что вы правильно обрабатываете данные из формы обратной связи и передаете их в функцию sendFeedback. 

Вот пример исправленного кода клиентской части:

```javascript
// Клиентская часть script.js
const FEEDBACK_FORM = document.querySelector('#feedback-form');

function sendFeedback(feedbackData) {
    fetch('/api/feedback', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(feedbackData)
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Ошибка:', error);
    });
}

FEEDBACK_FORM.addEventListener('submit', (event) => {
    event.preventDefault();

    const name = document.querySelector('#name').value;
    const phone = document.querySelector('#phone').value;
    const message = document.querySelector('#message').value;

    const feedbackData = {
        name,
        phone,
        message
    };

    sendFeedback(feedbackData);
});
```

Теперь у вас должно быть всё правильно настроено, и запрос должен отправляться на правильный адрес '/api/feedback'. Будьте внимательны к логам в консоли браузера для дополнительной отладки.