Если соединить базовый адрес и путь обычным +, легко получить лишний слеш или неверную вложенность. Конструктор URL умеет разрешать относительные ссылки по правилам адресов. В примерах Mentoring.digital посмотрим на результат, не выполняя сетевых запросов.
Последний слеш базы меняет результат
const directory = "https://example.test/api/v1/";
const fileLike = "https://example.test/api/v1";
console.log(new URL("orders", directory).href);
console.log(new URL("orders", fileLike).href);
console.log(new URL("/orders", directory).href);
console.log(new URL("../orders", directory).href);В первом случае получится https://example.test/api/v1/orders, во втором https://example.test/api/orders. Без завершающего слеша сегмент v1 считается последним сегментом адреса и заменяется относительным путём. Это не механическое добавление строки справа.
Начальный / строит путь от корня origin: третий результат заканчивается на /orders. Ссылка ../orders поднимается на один уровень от каталога базы, поэтому четвёртый результат заканчивается на /api/orders. Определите нужный смысл пути до выбора формы записи.
Абсолютный адрес не ограничен базой
Второй аргумент нужен для разрешения относительной ссылки. Если первый аргумент уже абсолютный, база не заставит его остаться на своём хосте. Для операции, которая принимает только ссылки своего origin, добавьте отдельную проверку:
function sameOriginAddress(input, base) {
const baseUrl = new URL(base);
const result = new URL(input, baseUrl);
if (!["http:", "https:"].includes(result.protocol)) {
throw new TypeError("Expected HTTP or HTTPS");
}
if (result.origin !== baseUrl.origin) {
throw new TypeError("Different origin");
}
return result;
}
console.log(sameOriginAddress("orders", directory).pathname);
try {
sameOriginAddress("https://other.test/orders", directory);
} catch (error) {
console.log(error.message);
}Если выполнить этот фрагмент после первого, он выведет /api/v1/orders и Different origin. Сравнение относится к разобранному origin, который учитывает схему, хост и порт. Проверка начала исходной строки не заменяет разбор URL.
Разбор, параметры и отправка являются разными шагами
Создание объекта URL не выполняет fetch и не проверяет существование ресурса. Некорректную базу или неразрешимую ссылку конструктор отклоняет через TypeError. Обрабатывать такую ошибку следует там, где приложение принимает внешний ввод.
После выбора правильного пути параметры можно менять через result.searchParams. Не кодируйте весь адрес как один параметр и не смешивайте правила пути с правилами строки запроса. Проверка origin также не описывает дальнейшие редиректы сервера и не является полной проверкой безопасности сетевого клиента.
Проверьте таблицу адресов до подключения API
Для своей базы сохраните ожидаемые результаты обычного относительного пути, пути от корня, перехода к родителю и абсолютной ссылки. Добавьте случай базы без слеша. Если маршрут не совпал с ожиданием, сначала исправьте договорённость о базе, а не добавляйте ещё одну замену строк.
Механику браузерных API можно отработать на курсе JavaScript. Разобрать сборку адресов в вашем интерфейсе поможет наставник по JavaScript, если подготовить примеры входных ссылок и ожидаемых маршрутов.
