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. Финальный пример
Недавні записи
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
- Чому трифазні мотори стали такими популярними?
- FOC & Polar coordinates
- Конструктор регуляторів PMSM, BLDC двигунів
- Своя бібліотека для векторного керування безколекторними моторами
- Not Allowed
- Адаптивний ПІД регулятор
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
Tags
wifi bme280 lcd dht11 solar displays bldc i2c adc usart gpio books brushless raspberry-pi python nodemcu bkp ethernet web git servo rfid stm32 ssd1331 barometer piezo timer battery sms mpu-9250 flash smd soldering st-link bmp280 exti bluetooth esp8266 watchdog nvic dc-dc max1674 hih-4000 flask websocket ngnix ssd1306 gps rs-232 eb-500 html mpu-6050 usb rtc encoder pwm avr led motor mpx4115a programmator capture dma css atmega eeprom foc meteo options examples docker 3d-printer pmsm mongodb tim uart sensors remap java-script
Архіви