Flask, CORS, JSON-файл. Пример#6

30.04.2020

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. Финальный пример