Прокси в Vite

Прокси отправляет запрос с пути сайта на другой адрес, и страница обращается к своему серверу.

Пусть на странице сначала появится слово hello, а затем подтянется заголовок задачи с тестового API. Запрос отправим на путь /todos/1 без указания чужого домена: браузер считает, что данные лежат на том же хосте, что и http://localhost:5173. Сопоставление пути и внешнего сайта зададим в настройке:

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/todos': 'https://jsonplaceholder.typicode.com',
    },
  },
})

Короткая запись сравнивает префикс /todos с базовым URL сервиса. Запрос к /todos/1 сервер разработки перенаправит на https://jsonplaceholder.typicode.com/todos/1 и вернёт ответ странице. В точке входа выполним запрос и допишем поле title к уже выведенному тексту:

document.body.textContent = 'hello';

fetch('/todos/1')
  .then((response) => response.json())
  .then((data) => {
    document.body.textContent = 'hello: ' + data.title;
  });

Поднимем сервер разработки:

npm run dev

Откроем страницу http://localhost:5173. После загрузки на экране останется приставка hello и текст задачи из JSON. Если прокси убрать, тот же fetch запросит несуществующий ресурс на локальном хосте, и данные не придут.

Настройте прокси для префикса /posts на https://jsonplaceholder.typicode.com, запросите /posts/1 из src/main.js и выведите на странице слово ready вместе с полем title из ответа.

Откройте страницу после перезапуска сервера и убедитесь, что запрос уходит на путь /posts/1 без домена jsonplaceholder в строке адреса в коде.