Що таке CORS? 🛑

А скільки разів ви плакали через корси? 😅

CORS розшифровується як Cross-Origin Resource Sharing або ж спільне використання ресурсів з різних джерел. Це функція безпеки, яка дозволяє серверам захищати дані та ресурси. Сервери можуть контролювати, які домени можуть доступатись до цих ресурсів.

Уявіть собі ситуацію: заходите на сайт lox.com, щоб пограти в онлайн-казино. А там десь всередині захований скрипт, який робить запит на yourbank.com/transfer-all-money. Було б дуже недобре, якби банківський сервер дозволяв запити будь-звідки.

Якщо що, приклад притягнутий за вуха 🙉

Я б назвав CORS навіть комплексом захисту, адже в цьому беруть участь і сервери, і браузери користувачів. Якщо ви слідкуєте за запитами у своїх застосунках, то могли помітити, що перед виконанням деяких з них браузер відправляє ще один запит з методом OPTIONS. Такий запит ще називають preflight. За його допомогою браузер може зрозуміти, які методи та хедери можна відправляти на цей URL та чи допускається дане джерело (Origin) для такого запиту. І якщо у відповідь на OPTIONS ви отримали такі хедери, які не проходять цю "валідацію", оригінальний запит буде заблокований.

Якщо детальніше, то не на всі запити буде йти супутній preflight запит, і у таких випадках браузер не зможе заблокувати сам запит, АЛЕ він зможе заблокувати відповідь на нього.

Тож CORS - це справді важлива система захисту в мережі. І перед вами стоїть важливий вибір - або матюкатись на нього, або ж один раз сісти та вивчити даний підхід! 💛

👉 Читати документацію

#interview

Як зробити preview зображень для <input type="file" />?

Завантаженням зображень на веб-сторінках сьогодні нікого не здивуєш. А як показати зображення, ще до того, як воно було оброблене? Адже в нас є тільки файл, а не src у текстовому форматі. Логічно виходить, що нам потрібно перетворити даний файл у текст.

Перший спосіб - URL.createObjectURL.

// Дістанемо файл, наприклад отак:
const file = event.target.files[0]

const url = URL.createObjectURL(file)

// Додамо цей url в src-атрибут для img
img.src = url

Після цього - не забудьте звільнити цей URL за допомогою URL.revokeObjectURL().

Інший спосіб - використати FileReader. Знайти приклади з ним - ваше домашнє завдання 🤓. Лише додамо, що якщо вам потрібно зробити щось таке у service worker - цей метод спрацює, на відміну від першого.

👉 Відкрити документацію URL.createObjectURL
👉 Відкрити документацію FileReader.readAsDataURL

Ну і звісно не без приколів. Стандартний формат зображень на iPhone - HEIF/HEIC, який поки не підтримується більшістю браузерів. Тому, якщо вам необхідно підтримувати і цей формат, зверніть увагу на бібліотеку heic2any.

👉 Відкрити документацію heic2any

#interview

Next.js App Router 🚏

Колись давно, до Next.js 13, існував лише pages router. Він працював за доволі простими правилами: є папка pages, у якій кожен файл (крім деяких зарезервованих) автоматично стає сторінкою. Шлях до сторінки визначався її розташуванням у цій папці.

Однак із появою серверних компонентів, actions та підтримки streaming зʼявився і новий підхід до роутингу.

У Next.js 13 було представлено новий App Router. Замість папки pages тепер використовується папка app, де сторінками є лише файли з іменем page.tsx (чи з іншим відповідним розширенням). Такий підхід дозволяє використовувати всі нові можливості React: асинхронні компоненти, серверні функції, а також новий функціонал, зокрема layout, loading, паралельні роути тощо.

Загалом, з переваг можемо відмітити кращу модульність, більший фокус на сервері та можливості роботи з ним, та, здається, краща продуктивність. Але, на жаль, тим хто ще не перейшов на новий роутер потрібен час, щоб його вивчити та дослідити.

👉 А який тип роутера ви використовуєте у своїх застосунках?

#interview