Как реализовать взаимодействие frontend и API

Э, слушай, а вот это реально интересная тема. Сидишь ты, значит, пишешь свой фронтенд, всё красиво, кнопочки мигают, а потом понимаешь — бля, а данные-то откуда брать? Вот тут и начинается вся эта движуха с API на Node.js. Ну, типа, без бэкенда твой фронт — это как машина без двигателя: снаружи вроде ничего, а ехать не может, хоть ты тресни.

1. Создание REST API Endpoint:

Смотри, берёшь Express — это как наш главный инструмент, без него нихуя. Ставишь, настраиваешь, и поехали.

const express = require('express');
const app = express();
app.use(express.json()); // Эта штука JSON читает, без неё — пиздец

// Вот, допустим, делаем endpoint, чтобы пользователей получить
app.get('/api/users', async (req, res) => {
  try {
    // Тут логика, типа лезешь в базу данных
    const users = await UserModel.find({});
    res.status(200).json({
      success: true,
      data: users
    });
  } catch (error) {
    // А если всё накрылось медным тазом
    res.status(500).json({
      success: false,
      message: 'Ошибка при получении пользователей'
    });
  }
});

// А это чтобы нового пользователя создать
app.post('/api/users', async (req, res) => {
  try {
    const newUser = new UserModel(req.body);
    const savedUser = await newUser.save();
    res.status(201).json({
      success: true,
      data: savedUser
    });
  } catch (error) {
    res.status(400).json({
      success: false,
      message: error.message
    });
  }
});

app.listen(3000, () => console.log('API сервер запущен на порту 3000'));

Вот и вся магия. Главное — ошибки ловить, а то фронтендеры потом придут с вилами, если у них всё упадёт.

2. Настройка CORS для доступа с фронтенда:

А вот это, бля, важнейшая вещь! Без CORS твой фронт с другого порта просто не сможет до API достучаться, браузер заблокирует. Ёпта, как будто стена между ними. Ставишь пакет cors и настраиваешь.

npm install cors

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:8080', // Тут адрес твоего фронта
  credentials: true // Если куки или сессии используешь
}));

Вот теперь они смогут общаться, и волнение ебать упадёт.

3. Реализация аутентификации (например, с JWT):

Ну а это чтобы не любой левый чувак в API мог залезть. JWT — это как пропуск, токен. Секретный ключ только ты знаешь.

const jwt = require('jsonwebtoken');
const SECRET_KEY = process.env.JWT_SECRET; // Ключ в переменные окружения, не в код!

// Прослойка, которая проверяет, есть ли у чувака пропуск
const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1]; // Формат "Bearer TOKEN"
  if (!token) return res.sendStatus(401); // Нет токена? Иди на хуй

  jwt.verify(token, SECRET_KEY, (err, user) => {
    if (err) return res.sendStatus(403); // Токен невалидный? Тоже на хуй
    req.user = user;
    next(); // Всё ок, проходи
  });
};

// Защищённый маршрут, сюда просто так не попадёшь
app.get('/api/profile', authenticateToken, (req, res) => {
  res.json({ user: req.user });
});

4. Документирование API (например, с Swagger/OpenAPI): А это чтобы не быть пидарасом шерстяным и другим разработчикам (или себе через месяц) было понятно, как твоё API работает. Используешь swagger-jsdoc — пишешь комментарии в коде, а документация сама генерируется. Красота, а не работа.

5. Тестирование Endpoints: Ну и конечно, без тестов — нихуя. Написал endpoint, а он не работает? Пизда рулю. Используешь Jest и Supertest, чтобы проверить, что всё пашет как надо.

const request = require('supertest');
describe('GET /api/users', () => {
  it('should return all users', async () => {
    const res = await request(app).get('/api/users');
    expect(res.statusCode).toBe(200);
    expect(res.body).toHaveProperty('data');
  });
});

Вот такой, бля, подход. С одной стороны, вроде ничего сложного, но если всё правильно сделать — получается овердохуища надёжная и безопасная связка фронта и бэка. Главное — не накосячить по мелочи, а то потом ищешь баг, а он, сука, в какой-нибудь запятой.