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