Прокси адреса в Nuxt

Браузеру иногда нужны данные с другого домена, но удобнее, чтобы адрес в строке оставался вашим. Отдельный серверный файл на каждый путь занимает время. В routeRules есть ключ proxy: Nuxt принимает запрос по локальному префиксу и запрашивает соответствующий путь у указанного базового URL.

Давайте познакомимся с пробросом на учебный JSON API. В nuxt.config.ts зададим шаблон и целевой хост:

export default defineNuxtConfig({
	routeRules: {
		'/external/**': {
			proxy: 'https://jsonplaceholder.typicode.com/**',
		},
	},
});

Часть пути после /external/ подставляется вместо звёздочки на стороне jsonplaceholder. Запрос к /external/users на вашем сайте Nuxt выполнит как обращение к https://jsonplaceholder.typicode.com/users и вернёт полученное тело клиенту. Префикс /external в URL внешнего сервера не появляется: остаётся только хвост /users. Так же /external/posts/1 превращается в /posts/1 на удалённом хосте.

Страница Vue для /external/users не обязательна, если нужен только JSON. Если же вы делаете страницу, которая вызывает /external/users через useFetch с того же домена, браузер не упирается в ограничения межсайтовых запросов к чужому origin. Менять адрес бэкенда потом можно в одном месте конфигурации.

Настройте routeRules с proxy, чтобы /employees/data/** на вашем сайте запрашивал данные с https://jsonplaceholder.typicode.com/** по тому же правилу подстановки хвоста пути.

Настройте routeRules с proxy, чтобы /departments/data/** на вашем сайте обращался к https://jsonplaceholder.typicode.com/** без префикса /departments/data в адресе внешнего сервера.