Как тестировать изменения во внешнем интерфейсе без их серверной части
Сколько раз вы изо всех сил пытались протестировать свои функции внешнего интерфейса в промежуточной среде, потому что внутренние зависимости еще не были на месте? Это происходит постоянно со мной, и часто может пройти несколько дней, прежде чем внешние зависимости разрешатся.
Недавно я наткнулся на AnyProxy.io - настраиваемый прокси, написанный на NodeJS, созданный разработчиками из Alibaba. С его помощью вы можете писать правила на JavaScript, чтобы перехватывать определенные сетевые запросы и вносить в них некоторые изменения, прежде чем они будут возвращены вам.
Итак, в этом руководстве мы рассмотрим, как мы можем добавить недостающие узлы JSON в наши запросы, чтобы мы могли протестировать нашу функцию за пределами нашего локального env, не дожидаясь, пока другие команды реализуют свои изменения.
Настройка AnyProxy
Ваш самый первый шаг - установить AnyProxy глобально с помощью команды npm i -g anyproxy
, чтобы мы могли ввести anyproxy
в командную строку, чтобы запустить прокси-сервер. Он запустит прокси на порту 8001 и веб-интерфейс на 8002. Если вы посетите localhost:8002
, вы увидите пустую панель управления:
Здесь вы сможете проверить запросы, чтобы увидеть, какой из них вам нужно переопределить. По умолчанию перехватываются только HTTP-запросы. Чтобы просмотреть расшифрованную информацию о запросах HTTPS, вам необходимо настроить некоторые сертификаты.
Создание сертификатов
По своей сути AnyProxy использует атаки типа «злоумышленник в середине» для расшифровки запросов HTTPS. Чтобы избежать ошибок на стороне клиента, нам придется сгенерировать сертификат CA и доверять ему. Введите anyproxy-ca
, чтобы сгенерировать сертификаты.
В Chrome откройте chrome://settings/?search=manage+certificates
, вы увидите выделенный параметр:
Откройте его, перейдите на вкладку «Доверенные корневые центры сертификации» и импортируйте сгенерированный сертификат AnyProxy. Вы также можете chrome://restart
после, чтобы убедиться, что сертификат вступил в силу.
Включение прокси
Теперь вам нужно включить прокси-сервер и установить свой IP-адрес и порт 8001 - именно здесь AnyProxy слушает. Введите «прокси» в строку поиска и нажмите «Изменить настройки прокси». Перед вами откроется следующее окно:
Вы можете получить свой IP-адрес, набрав ipconfig
в командной строке.
Перехват HTTPS
Теперь все готово. Если вы запустите AnyProxy с флагом --intercept
, он начнет перехватывать каждый ваш запрос:
Нажав на запрос, вы увидите как объект запроса, так и объект ответа, а также всю содержащуюся в нем информацию, такую как заголовок и тело.
Добавление правила перезаписи
Все, что осталось сделать, - это создать правило, чтобы мы могли перехватить единственный интересующий нас запрос и переписать его ответ. Я создал rule.js
файл, который экспортирует одну функцию: beforeSendResponse
.
Эта функция будет выполнена прямо перед отправкой ответа клиенту. Как видите, мы здесь мало что делаем. Мы проверяем URL-адрес запроса и, если он соответствует указанному нами, мы перезаписываем response.body
переменной data
.
И эти данные поступают из файла, который мы читаем с помощью модуля fs
, который содержит обновленный ответ JSON, который мы хотели бы видеть. Если вы перейдете по URL-адресу прямо сейчас, вы увидите, что он возвращает следующий ответ:
У нас есть основная информация о задании. Но что, если мы работаем над функцией, которая добавляет некоторые метаданные к элементу под узлом meta
? Это будет содержать дату создания, автора и примечание о задании. Мы хотим увидеть изменения, которые мы внесли во внешний интерфейс, который использует этот новый узел, но внутренняя часть работы еще не выполнена.
Запросы с приоритетом
Я создал data.json
в той же папке, что и мой rule.js
файл. Содержание следующее:
Я скопировал исходный ответ и добавил узел meta
. Это то, что мы хотели бы получить от URL-адреса, указанного в нашем rule.js
файле. Так как же нам сказать AnyProxy использовать его при перехвате запросов? Это очень просто. Запустите AnyProxy с --rule
флагом, указывающим на файл правил: anyproxy --intercept --rule rule.js
Именно так вы перехватываете запросы и опробуете изменения своего внешнего интерфейса в промежуточном окружении, не беспокоясь о внешних зависимостях. 🎉 Дайте мне знать в комментариях ниже, какие ваши любимые варианты использования прокси. Спасибо, что нашли время прочитать эту статью, удачной отладки!