Как тестировать изменения во внешнем интерфейсе без их серверной части

Сколько раз вы изо всех сил пытались протестировать свои функции внешнего интерфейса в промежуточной среде, потому что внутренние зависимости еще не были на месте? Это происходит постоянно со мной, и часто может пройти несколько дней, прежде чем внешние зависимости разрешатся.

Недавно я наткнулся на 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

Именно так вы перехватываете запросы и опробуете изменения своего внешнего интерфейса в промежуточном окружении, не беспокоясь о внешних зависимостях. 🎉 Дайте мне знать в комментариях ниже, какие ваши любимые варианты использования прокси. Спасибо, что нашли время прочитать эту статью, удачной отладки!