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. Финальный пример
Недавні записи
- DShot receiver on STM32
- CRSF to PWM
- U-FOC PC Monitor для Chrome browser
- Фільтрація Back-EMF. Безсенсорні BLDC мотори
- Text to speech. Українська мова
- LCD Display ST7567S (IIC)
- Розпізнавання мови (Speech recognition)
- Selenium
- Комп'ютерний зір (Computer Vision)
- Деякі думки про точність вимірювань в електроприводі
Tags
git wifi encoder solar atmega ssd1331 sensors nvic piezo rfid smd python usb rtc motor timer bmp280 mpu-9250 barometer ethernet html books sms flask ssd1306 adc battery max1674 lcd soldering avr bldc stm32 mongodb 3d-printer remap eeprom dc-dc displays java-script nodemcu programmator gps watchdog gpio raspberry-pi websocket flash rs-232 css hih-4000 foc brushless esp8266 uart meteo bme280 mpu-6050 examples i2c servo capture bluetooth led web options bkp pwm usart exti st-link tim docker ngnix dma pmsm dht11 eb-500 mpx4115a
Архіви