POST JSON из JS в Python (Flask)

Писатель, работающий в среде без отвлечений

Введение

API — это стандартный способ обмена данными между клиентом и сервером. В веб-приложениях фронтенд (например, JavaScript в браузере) отправляет HTTP-запросы, а бэкенд (например, Python/Flask) возвращает ответы. В этой заметке мы подробно разберём сценарий: отправка JSON-массива из JavaScript на сервер через POST и обработка его во Flask.

Важно: этот пример ориентирован на локальную разработку. Перед развёртыванием на проде используйте HTTPS, проверку входных данных и другие меры безопасности, описанные ниже.

Нужные установки: Python, виртуальная среда и Flask

Коротко:

Windows: скачайте Python с python.org и установите.
macOS: Python обычно доступен по умолчанию; при необходимости можно обновить через Homebrew.
Linux: используйте менеджер пакетов вашей дистрибуции.

Рекомендую создать виртуальную среду и установить Flask и flask-cors:

python -m venv venv
# активируйте venv (Linux/macOS: source venv/bin/activate, Windows: venv\Scripts\activate)
pip install flask flask-cors

Пакет flask-cors помогает обходить ограничения cross-origin при разработке (CORS). Важно понять, что CORS — это политика браузера: если фронтенд и бэкенд работают на разных хостах или портах, нужно правильно настроить заголовки на сервере.

Структура проекта (минимум)

Рекомендуемая простая структура папок:

project-root/
- app.py
- index.html
- data.js
- venv/

Код Flask: базовый сервер и POST-эндпоинт

Создайте файл app.py в корне проекта. Ниже — минимальный, понятный код с комментариями на русском:

from flask import Flask, request, jsonify
from flask_cors import CORS

# Инициализация приложения
app = Flask(__name__)
# Разрешаем CORS для упрощённой разработки (по умолчанию все источники)
cors = CORS(app)

# POST-эндпоинт /receiver для приёма JSON
@app.route('/receiver', methods=['POST'])
def post_me():
    # request.get_json() парсит JSON-тело в Python-структуры
    data = request.get_json()
    # При необходимости валидируйте/обрабатывайте data здесь
    return jsonify(data)

if __name__ == '__main__':
    # debug=True удобен при разработке
    app.run(debug=True)

Пояснения:

request.get_json() возвращает Python-объект (список, словарь) из JSON.
jsonify сериализует Python-объект обратно в JSON и устанавливает заголовок Content-Type: application/json.

HTML: простая страница с кнопкой

Создайте index.html рядом с app.py. Она содержит кнопку, нажатие которой отправит данные на сервер:



  
    
    Отправка данных в Python

JavaScript: отправка JSON через fetch

В файле data.js разместите логику для отправки массива объектов cars на сервер:

// Получаем элементы
const button = document.getElementById('theButton')
const dataContainer = document.getElementById('info')

// Массив машин, который отправим на сервер
const cars = [
  { make: 'Porsche', model: '911S' },
  { make: 'Mercedes-Benz', model: '220SE' },
  { make: 'Jaguar', model: 'Mark VII' }
]

// Обработчик клика
button.onclick = function () {
  fetch('http://127.0.0.1:5000/receiver', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify(cars)
  })
    .then(res => {
      if (res.ok) return res.json()
      else throw new Error('Неверный ответ от сервера')
    })
    .then(jsonResponse => {
      console.log(jsonResponse)
      // Можно обновить DOM или выполнить другую логику
      dataContainer.innerHTML = ''
      jsonResponse.map(item => {
        const p = document.createElement('p')
        p.textContent = item.make + ' — ' + item.model
        dataContainer.appendChild(p)
      })
    })
    .catch(err => console.error(err))
}

Пояснение: fetch автоматически открывает сетевой запрос из браузера. Мы устанавливаем заголовок Content-Type, чтобы сервер знал, что получает JSON.

Отладка в браузере

Откройте index.html в браузере и затем откройте инструменты разработчика:

Windows: Ctrl + Shift + I
macOS: Cmd + Option + I

Во вкладке Network выберите запрос /receiver и посмотрите вкладку Response — там вы увидите JSON, который вернул сервер. Также в консоли появится вывод console.log(jsonResponse).

Ответ API в консоли сети браузера

Screenshot: no attribution needed

Отображение ответа в DOM (пример)

Если нужно отобразить ответ прямо на странице, в примере выше мы создаём абзацы с make и model. Альтернативно можно использовать шаблонизацию или фреймворк (React, Vue).

Данные ответа API, отображённые в DOM

Screenshot: no attribution needed

Частые проблемы и как их решать

CORS-ошибка в консоли: браузер блокирует запрос. В разработке используйте flask-cors или настройте заголовки Access-Control-Allow-Origin на сервере. В проде задавайте точные домены, а не ‘*’.
Сервер не доступен: проверьте, что Flask запущен (app.run) и порт совпадает (по умолчанию 5000).
Неправильный Content-Type: убедитесь, что вы отправляете ‘application/json’ и используете JSON.stringify на клиенте.
request.get_json() возвращает None: чаще всего из-за неверного Content-Type или пустого тела.

Альтернативы и когда использовать другие инструменты

FastAPI: если нужна высокая производительность и автогенерация документации OpenAPI. Поддерживает асинхронные обработчики.
Django + Django REST Framework: если проект требует встроенного ORM, сложной авторизации и готовых CRUD-утилит.
Серверless (AWS Lambda / Cloud Functions): если нужен кратковременный сервер без постоянного хостинга.
Axios на стороне клиента: альтернативный HTTP-клиент с удобной обработкой ошибок.
WebSockets: если вам нужен двунаправленный поток данных в реальном времени.

Безопасность и рекомендации (важно)

Никогда не доверяйте данным с клиента — валидируйте и фильтруйте на сервере.
Используйте HTTPS в продакшне.
Ограничьте CORS перечнем доверенных источников, а не ‘*’ .
Для операций, изменяющих состояние, применяйте аутентификацию/авторизацию (JWT, OAuth, сессионные куки).
Ограничьте размер входящих payload’ов и устанавливайте таймауты.

Короткая методология: шаги разработки

Создайте виртуальную среду и установите зависимости.
Напишите минимальный Flask-эндпоинт и проверьте через curl или Postman.
Реализуйте фронтенд и отправьте тестовый JSON.
Проверьте в DevTools: Network и Console.
Добавьте валидацию и логирование на сервере.
Подготовьте настройки CORS и HTTPS перед развёртыванием.

Ролевые чеклисты

Разработчик фронтенда:

Написать fetch/axios-запрос
Обработать ошибки сети и сервера
Отобразить прогресс и статусы пользователю

Разработчик бэкенда:

Реализовать эндпоинт и валидацию входных данных
Логировать ошибки и запросы
Прописать CORS и политики безопасности

DevOps:

Настроить HTTPS и перенаправления
Настроить мониторинг и резервирование
Ограничить публичные доступы (firewall)

QA-инженер:

Проверить граничные случаи payload’ов
Тестировать на отказоустойчивость и некорректные данные
Проверить поведение при медленном или прерванном соединении

Когда этот подход не подходит (контрпримеры)

Нужен стриминг больших объёмов данных в реальном времени — используйте WebSockets или SSE.
Если нужен микросервис с высокой нагрузкой и асинхронной обработкой — рассмотрите FastAPI или специализированные очереди задач (Celery, RabbitMQ).
Если требуется строгая согласованность и сложные транзакции с БД — используйте зрелые ORM и архитектуру с транзакциями.

Критерии приёмки

Сервер принимает POST-запросы на /receiver и возвращает корректный JSON с кодом 200.
Клиент успешно отправляет JSON и получает ожидаемый ответ при нормальных условиях.
Логи сервера содержат записи о приёме запросов и ошибки обработаны.
В проде используется HTTPS и ограниченный CORS.

Краткий глоссарий

CORS: политика браузера, контролирующая происхождение запросов.
Endpoind: URL, по которому приложение принимает запросы.
JSON: формат обмена данными, удобный и человекочитаемый.

Дополнительно: небольшая диаграмма принятия решения

flowchart TD
  A[Нужно ли просто отправлять JSON?] -->|Да| B[Использовать fetch/axios + Flask]
  A -->|Нет, нужен поток| C[Использовать WebSockets или SSE]
  B --> D{Требуется высокопроизводительный API?}
  D -->|Да| E[Рассмотреть FastAPI]
  D -->|Нет| F[Flask подходит]

Связь с базой данных и дальнейшие шаги

Если вы хотите сохранять опубликованные данные, подключите базу данных (PostgreSQL, MongoDB и т. п.) и храните объекты после валидации. Для MongoDB можно использовать PyMongo или ODM; для SQL — SQLAlchemy.

Итог

Вы изучили базовый путь: как отправить JSON из браузера на Flask-сервер через POST, как отладить запросы и какие риски учесть. Дальше можно расширять приложение: добавлять валидацию, авторизацию, постоянное хранилище и CI/CD.

Важно: при переносе на продакшен не забывайте про безопасность, мониторинг и масштабирование.

Как отправить JSON из JavaScript в Python (Flask) через POST