Отправить JSON из JavaScript в Python (Flask)

Человек пишет в спокойной, не отвлекающей рабочей среде

Короткая цель статьи

Вы научитесь: установить Flask, создать POST-эндпоинт /receiver, отправить массив JSON из JavaScript (fetch) и отобразить ответ в консоли или в DOM. Кроме того, получите рекомендации по безопасности, тестированию и альтернативы.

Введение

API (интерфейсы прикладного программирования) позволяют фронтенду и бэкенду обмениваться данными. В большинстве случаев фронтенд отправляет HTTP-запрос (POST/GET/PUT/DELETE) к серверу, сервер обрабатывает запрос и возвращает JSON. В этом руководстве используем POST для отправки данных в формате JSON из JavaScript в Python с Flask.

Уровень требований

Коротко: нужен Python (рекомендуется 3.7+), pip, браузер и любой текстовый редактор. Для локальной разработки Flask по умолчанию работает на порту 5000.

Установка Python и Flask

Если Python не установлен — загрузите его с python.org. На macOS Python может уже быть установлен, но для чистоты разработки рекомендуется виртуальное окружение.

Создайте виртуальное окружение в корне проекта и активируйте его. Затем установите Flask и flask-cors:

pip install Flask flask-cors

Примечание: пакет flask-cors упрощает обход политики CORS при запросах с другого происхождения (origin). В продакшне настройте CORS более тонко.

Важно: команда pip должна быть корректной (без запятых). Если используете pipx/poetry/venv — установите пакеты в соответствующем окружении.

Скелет Flask-приложения

Создайте файл app.py в корне проекта. Ниже — минимальный пример (в исходной статье был похожий фрагмент; здесь — рабочая версия с комментариями):

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

app = Flask(__name__)
# Разрешаем CORS для всех источников — в разработке удобно, в продакшне ограничьте список origin
CORS(app)

@app.route('/receiver', methods=['POST'])
def postME():
    # Получаем JSON-плейлоад из тела запроса
    data = request.get_json()
    # Можно добавить валидацию или сохранение в БД
    return jsonify(data), 200

if __name__ == '__main__':
    # Запуск в режиме отладки на порту 5000
    app.run(debug=True)

Оригинальный пример в статье также показывает базовую структуру и вызов app.run(). Сохраняйте файл и запускайте: python app.py

HTML и JavaScript — фронтенд

Создайте index.html и файл со скриптом (например, data.js) в той же папке, где app.py.

index.html (минимум):



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

В исходной статье приведён тот же HTML; здесь важно, чтобы data.js был подключён и доступен браузеру при открытии index.html.

data.js — пример с fetch (оригинальная логика сохранена ниже, и добавлен модернизированный вариант):

// Get the button and container elements from HTML
const button = document.getElementById("theButton")
const data = document.getElementById("info")

// Create an array of cars to send to the server
const cars = [
    { "make":"Porsche", "model":"911S" },
    { "make":"Mercedes-Benz", "model":"220SE" },
    { "make":"Jaguar","model": "Mark VII" }
];

// Create an event listener on the button element
button.onclick= function(){

    // Get the reciever endpoint from Python using fetch
    fetch("http://127.0.0.1:5000/receiver",   
        {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/json'
            },
        // Strigify the payload into JSON
        body:JSON.stringify(cars)}).then(res=>{
                if(res.ok){
                    return res.json()
                }else{
                    alert("something is wrong")
                }
            }).then(jsonResponse=>{
                
                // Log the response data in the console
                console.log(jsonResponse)
            }   
            ).catch((err) => console.error(err));
              
           }

Этот фрагмент взят из исходного материала и демонстрирует базовую концепцию: при клике отправляется POST-запрос, сервер возвращает JSON, который отображается в консоли.

Современный вариант: async/await и рендер в DOM

Ниже — тот же пример, но с async/await и выводом в элемент info:

const button = document.getElementById('theButton')
const info = document.getElementById('info')

const cars = [
  { make: 'Porsche', model: '911S' },
  { make: 'Mercedes-Benz', model: '220SE' },
  { make: 'Jaguar', model: 'Mark VII' }
]

button.addEventListener('click', async () => {
  try {
    const res = await fetch('http://127.0.0.1:5000/receiver', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(cars)
    })

    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    const jsonResponse = await res.json()

    console.log(jsonResponse)
    // Простейший рендер
    info.innerHTML = jsonResponse.map(item => `<p>${item.make} — ${item.model}</p>`).join('')
  } catch (err) {
    console.error('Request failed:', err)
    info.textContent = 'Ошибка при отправке данных. Проверьте консоль.'
  }
})

Примечание: при вставке HTML в innerHTML экранируйте/валидируйте данные во избежание XSS.

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

Отладка: как увидеть ответ

Откройте index.html в браузере, включите DevTools (Windows: Ctrl+Shift+I, macOS: Cmd+Opt+I). Во вкладке Console вы увидите JSON-ответ. Во вкладке Network выберите запрос к /receiver и посмотрите Response и Headers. В идеале статус 200 и корректный JSON в теле.

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

Возможные проблемы и как их решать

CORS: ошибка типа “Access to fetch at ‘…’ from origin ‘null’ has been blocked by CORS policy” — включите flask-cors и настройте допустимые origin; в продакшне не открывайте доступ всем.
Неправильный Content-Type: убедитесь, что заголовок Content-Type: application/json и что сервер читает request.get_json().
Сервер недоступен: проверьте, что Flask запущен и слушает порт, и что URL совпадает.
Ошибки в JSON: JSON.stringify должен применяться к валидным объектам; циклические ссылки приведут к ошибке.

Контроль качества: тесты и критерии приёмки

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

Запрос POST к /receiver возвращает 200 и тот же JSON (или ожидаемый ответ).
При невалидном JSON сервер возвращает 400 с информативным сообщением.
CORS разрешён только для доверенных origin (в продакшне).

Тесты (минимум)

Unit: тест функции, которая валидирует входной payload.
Интеграция: отправка POST и проверка ответа.
E2E: кнопка в UI реально отправляет данные и рендерит результат.

Пример быстрого теста curl:

curl -X POST http://127.0.0.1:5000/receiver -H "Content-Type: application/json" -d '[{"make":"Porsche","model":"911S"}]'

Альтернативные подходы и сравнение

FastAPI: быстрее создавать типизированные эндпоинты, автоматическая документация (OpenAPI). Рекомендуется для production API.
Django (Django REST Framework): если нужен полноценный веб-фреймворк с ORM и сложной бизнес-логикой.
WebSockets (Socket.IO): если требуется двунаправленная связь в реальном времени.

Когда Flask не подходит

Большие API с высокой нагрузкой и необходимостью асинхронной обработки — лучше FastAPI/ASGI.
Если нужна тесная интеграция с ORM и административной панелью — DRF/Django.

Безопасность и жёсткие практики

Валидация входных данных: всегда проверяйте структуру и типы полей.
Ограничение CORS: в продакшне укажите точные origin, а не CORS(app) для всех.
Защита от XSS: экранируйте данные при вставке в DOM.
Лимит на размер тела запроса: предотвращайте отправку чрезмерных payload.
Аутентификация и авторизация: добавьте токены (JWT/OAuth) для защищённых эндпоинтов.
Логи и мониторинг: храните логи запросов и ошибок, но не записывайте сырые персональные данные.

Конфиденциальность и соответствие (GDPR/законы о данных)

Если в JSON содержатся персональные данные (имена, контакты, идентификаторы), нужно:

Получить явное согласие пользователя на обработку.
Шифровать данные в хранилище и защищать каналы (HTTPS/TLS).
Иметь возможность удаления данных по запросу.

Мини‑методология: от идеи до рабочего прототипа (шаги)

Создать виртуальное окружение и установить Flask.
Написать минимальный эндпоинт /receiver, который возвращает request.get_json().
Написать простой HTML+JS с fetch, проверить локально.
Добавить валидацию и тесты.
Развернуть на тестовом сервере с HTTPS.
Ограничить CORS и добавить аутентификацию.

Роль‑ориентированные чек-листы

Frontend

Проверить Content-Type и тело запроса.
Обработать ошибки ответа и показать пользователю.
Экранировать данные перед вставкой в DOM.

Backend

Валидация JSON и возвращение корректных статусов (200/400/500).
Логи и обработка исключений.
Ограничение CORS и применение аутентификации.

DevOps

Настроить HTTPS и проверку сертификатов.
Настроить прокси (nginx) и балансировку нагрузки.
Мониторинг метрик и логов.

Шаблоны и шпаргалки

Curl для отладки

curl -i -X POST http://127.0.0.1:5000/receiver \
  -H "Content-Type: application/json" \
  -d '[{"make":"Porsche","model":"911S"}]'

Postman: создайте POST-запрос с body -> raw -> JSON и заголовок Content-Type: application/json.

Миграция и совместимость

Flask (WSGI) хорошо подходит для небольших сервисов. Если потребуется асинхронность, мигрируйте на FastAPI (ASGI) с меньшими изменениями в логике, но с улучшенной производительностью и автоматической документацией.
При переносе на продакшн используйте gunicorn/uvicorn за nginx.

Быстрый чеклист развертывания в продакшн

HTTPS включён
CORS настроен строго
Лимиты на размер запроса
Логи и ротация логов
Мониторинг и алерты

Когда это не сработает / контрпримеры

Браузер блокирует запросы из-за CORS и сервер неправильно сконфигурирован.
Payload слишком большой и сервер ограничивает тело запроса.
Нужна потоковая (streaming) передача — тогда POST с JSON не оптимален, лучше использовать WebSockets или chunked uploads.

Краткое резюме

Для отправки JSON из JavaScript в Python используйте fetch с POST и Content-Type: application/json.
На сервере Flask считывает JSON через request.get_json() и возвращает response через jsonify().
Всегда добавляйте валидацию, ограничивайте CORS и используйте HTTPS в продакшне.

Заканчивая: вы получили готовую рабочую схему и набор практик — можно расширить эндпоинт сохранением в БД (MongoDB, PostgreSQL) и добавить аутентификацию, чтобы приложение стало полноценным проектом.

1‑line glossary

JSON — формат данных (ключ:значение) для обмена между клиентом и сервером.

Thank you — теперь вы можете безопасно и осознанно отправлять JSON из фронтенда в Flask API.

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