Отключение защиты хоста vue-приложений
Рассуждения
Нет, это статья не о хакерстве.
У Vue-приложений есть один нюанс. Они проверяют хэдер запроса и, если хост отличается от того, на котором они развернуты, возвращают 404 ошибку. Проблемой это становится когда приложение и программа, которая к нему обращается разворачиваются в контейнере. Приложение думает что оно развернуто на localhost: хххх, а к нему обращаются через container_name: хххх.
В принципе, ничего сложного, но об этом неочевидном моменте практически нет информации, так что учесть его сразу нереально, а времени на решение проблемы уходит много.
Теория
У Vue-приложений в файле vue.config.js есть настройка disabdeHostCheck. По умолчанию она false. Нам нужно установить ее в true, но так, чтобы она была таковой только во время тестов. Лучший вариант — создание глобальной переменной, которая всегда будет false, только если мы не переопределим ее.
Практика
Для этого в vue.config.js добавим пару строк:
const IS_CYPRESS_ENV = /true/i.test(process.env.VUE_APP_IS_CYPRESS_ENV) // Это добавили мы
module.exports = {
// Тут какие-то настройки разработчиков, которые нам не интересны
devServer: {
disableHostCheck: IS_CYPRESS_ENV, // Это добавили мы
// Далее нам тоже не интересно
const IS_CYPRESS_ENV = /true/i.test(process.env.VUE_APP_IS_CYPRESS_ENV) — создаем глобальную переменную, которая равна false, если мы не переопределим ее.
disableHostCheck: IS_CYPRESS_ENV — приравниваем отключение защиты хоста к этой переменной.
Для активации нашей настройки в docker-compose.cypress.yml делаем следующее:
services:
frontend:
build:
context: .
dockerfile: Dockerfile
environment: //
— VUE_APP_IS_CYPRESS_ENV=true //Добавили эти строки
ports:
— '5000:5000'
command: [«команда для запуска»]
environment:
— VUE_APP_IS_CYPRESS_ENV=true — переопределяем переменную в значение true
Готово!