Flask, CORS, JSON-файл. Пример#6
CORS
Cross-origin resource sharing (CORS) - совместное использование ресурсов между разными источниками.
Дело в том, что если Java Script будет обращаться к бекенду с другого домена, то он не сможет получить данные без особого разрешения, таковы правила безопасности для JavaScript. На этапе разработки удобно, если такая возможность будет. Например, бэкенд работает на одном домене (на каком то удаленном сервере), а разработка фронтенда ведется на другом домене или на локальном домене (localhost).
В этом примере сделана небольшая доработка. Применен модуль cross_origin, который решает эту проблему.
Модуль cross_origin добавляет в заголовок HTML ответа параметр "Access-Control-Allow-Origin". В принципе, этот заголовок можно добавить и вручную при формировании ответа. Например так:
@app.route('/<string:model>/', methods=['GET'])
def model_read_all(model):
resp = jsonify(db.getModel(model).read())
resp.headers['Access-Control-Allow-Origin'] = '*'
return resp, 200
Можно указать перечень доменов, обращаясь с которых браузер разрешит Java Script получать данные. В данном случае указано значение '*' - это значит можно с любых доменов. Разумеется, в рабочем варианте так делать не рекомендуется и следует явно указать перечень разрешенных доменов. Но на этапе разработки можно оставить разрешение для всех.
Используемый модуль cross_origin фактически делает то же самое, но "по-модному". Модуль cross_origin позволяет "включить" COR разными способами. В данном примере используется decorator (@cross_origin()).
Подробнее о модуле читайте здесь: https://flask-cors.readthedocs.io/en/latest/
Данные из JSON-файла
Так же в этом примере сделана выдача меню. И сделано это тем же способом, что и в предыдущем примере работа с таблицами базы данных. В папке model добавлен файл menu.py, в котором описан класс с четырьмя методами (Create, READ, Update, Delete). Фактически пока используется только метод read, все остальные (create, update, delete) - это пустышки. На данном этапе меню может только читаться. Структура меню читается из файла ‘menu.json’. Из примера выдачи меню Вы можете видеть, что класс меню по структуре не отличается от других классов, которые работают с БД. Создание объекта меню добавлено в инициализацию класса app_db (см. файл app_db.py).Данные для меню не является таблицей базы данных - они читаются из файла, но применяя подход CRUD (Create, READ, Update, Delete) мы стандартизируем работу с любыми данными любой структуры.
Это позволяет упростить разработку фронтенда используя стандартные методы (Create, READ, Update, Delete) для работы с любыми данными.
Теперь можно продолжить работу над фронтендом и наконец то воссоединить его с бекендом.
Запуск примера
В этом примере, как и в предыдущих, нужно сначала создать базу данных. Для этого запустите скрипт createDB.py.
python3 ./createDB.py
Этот скрипт создаст базу данных SQLite и заполнит её данными.
После этого можно запускать пример:
python3 ./my_app.py
Откройте в браузере:
http://localhost:5000/frontend/
Фронтенд, как и раньше, все пишет в консоль. В примере ссылки заменены на абсолютные. Теперь неважно на каком домене будет работать Java Script. Вы можете открыть в браузере файл flask_example6/frontend/index.html открыв его как локальный файл и Java Script все равно будет нормально работать.
В следующем примере:
Бекенд на Flask + фронтенд на Vue - базовый пример - заготовка любого web-приложения
Смотри также:
- Flask. Установка и первое приложение
- Flask. JSON
- Flask + SQLite + JSON
- Flask > db_class > SQLite
- Flask. Model. ООП для работы с данными
- Flask, CORS, JSON-файл
- Flask + Vue. Финальный пример
Недавні записи
- Комп'ютерний зір (Машинний зір)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
- Модуль драйверів напівмосту IGBT транзисторів
- Драйвер IGBT транзисторів на A316J
- AS5600. Варіант встановлення на BLDC мотор
- DC-DC для IGBT драйверів ізольований 2 W +15 -8 вольт
- U-FOC - Векторне керування безколекторними моторами
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
Tags
ngnix flash flask i2c servo dma gpio avr solar bme280 docker eeprom sms java-script barometer rtc dht11 ssd1306 bldc motor raspberry-pi ssd1331 mpu-9250 dc-dc rfid foc st-link usb remap pwm capture soldering nodemcu lcd eb-500 esp8266 mpu-6050 nvic usart books mpx4115a timer adc bluetooth tim programmator meteo sensors led python websocket hih-4000 html pmsm mongodb bmp280 gps encoder displays smd stm32 css git examples rs-232 ethernet brushless 3d-printer watchdog max1674 exti atmega options battery uart wifi bkp piezo web
Архіви