Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Оглавление

Встроенные middleware

Многие middleware не нужно писать самим: они уже входят в пакет hono и подключаются одной строкой. Устанавливать ничего не надо, каждое импортируется из своего подпути, например hono/logger.

logger

Печатает в терминал каждый запрос и ответ:

// src/index.ts
import { logger } from 'hono/logger'
 
app.use(logger())

После запроса к /posts в терминале появятся две строки: <-- GET /posts при входе и --> GET /posts 200 3ms при ответе. Подключайте его первым, чтобы оно видело все запросы.

cors

Браузер не даёт странице с одного домена читать ответы API с другого домена, если сервер это явно не разрешил. Это правило называется CORS. Если фронтенд блога работает на http://localhost:5173, а API — на порту 3000, нужно разрешение:

// src/index.ts
import { cors } from 'hono/cors'
 
app.use('/posts/*', cors({ origin: 'http://localhost:5173' }))

Теперь fetch('http://localhost:3000/posts') со страницы на порту 5173 получит данные. Вызов cors() без настроек разрешает любой домен — так можно делать только для открытых API.

secureHeaders

Добавляет набор заголовков безопасности, например X-Content-Type-Options: nosniff и X-Frame-Options:

// src/index.ts
import { secureHeaders } from 'hono/secure-headers'
 
app.use(secureHeaders())

Команда curl -i http://localhost:3000/posts покажет эти заголовки в ответе.

etag

ETag — отпечаток содержимого ответа. Браузер присылает его в следующем запросе, и если данные не изменились, сервер отвечает коротким кодом 304 без тела:

// src/index.ts
import { etag } from 'hono/etag'
 
app.use('/posts/*', etag())

В ответе появится заголовок etag, повторные запросы браузера будут получать 304.

basicAuth

Простая защита логином и паролем. Браузер сам покажет окно ввода:

// src/index.ts
import { basicAuth } from 'hono/basic-auth'
 
app.use('/admin/*', basicAuth({ username: 'admin', password: 'secret' }))
 
app.get('/admin', (c) => c.text('Панель управления'))

Откройте http://localhost:3000/admin — браузер спросит логин и пароль. Без них ответ — 401. Для API с пользователями лучше подходит JWT, ему посвящён отдельный урок.

Сводная таблица

MiddlewareИмпортДля чего
logger()hono/loggerжурнал запросов
cors()hono/corsдоступ с других доменов
secureHeaders()hono/secure-headersзаголовки безопасности
etag()hono/etagкеширование с кодом 304
basicAuth()hono/basic-authвход по логину и паролю
prettyJSON()hono/pretty-jsonJSON с отступами по ?pretty

Частая ошибка

Middleware с адресом пишут как app.use('/admin', ...) и удивляются, что /admin/posts не защищён. Адрес без звёздочки совпадает только с самим /admin. Чтобы закрыть всё внутри, пишите /admin/* — этот шаблон в Hono совпадает и с /admin, и с вложенными адресами.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.