Популярні інструменти та методи імітації запитів на походження в місцевих середовищах розвитку обертаються в основному навколо обробки та обхідних ресурсів перехресного походження (CORS), накладених браузерами. Ці інструменти допомагають розробникам тестувати та налагодити взаємодію перехресного походження, або ввімкнувши CORS на локальних серверах, використовуючи проксі, або використовуючи розширення та конфігурації браузера браузера. Нижче наведено детальну інформацію про деякі загальні підходи та інструменти, що використовуються для цієї мети.
Розуміння CORS
Перехресний обмін ресурсами (CORS)-це механізм безпеки, реалізований у браузерах, який обмежує веб-програми, що працюють на одному походження (домен, протокол, порт) до доступу до ресурсів на інше походження, якщо сервер явно не дозволяє йому через конкретні заголовки HTTP. CORS працює на серверах, що надсилають заголовки, такі як `` Контроль доступу-спалаху-origin`, щоб вказати, які домени дозволені для доступу до ресурсів. Браузери виконують це, надіславши запит "перед польотом" (запит на параметри HTTP) на певні типи дзвінків перехресного походження для перевірки дозволів, перш ніж робити фактичний запит. Заголовки CORS контролюють не тільки, яке витоки дозволено, але і які можуть використовуватися методи та заголовки HTTP, і чи можуть бути надсилаються дані, як файли cookie.
Проблеми з місцевим розвитком
Під час місцевого розвитку проекти часто працюють на різних портах або доменах LocalHost, які вважаються різними походженнями та запускає обмеження CORS, що ускладнює тестування перехресних прорізів. Розробникам потрібні інструменти або конфігурації, які імітують або обходять ці обмеження локально, щоб дозволити їх передній та задній кінець належним чином спілкуватися, не впливаючи на виробничі середовища.
Інструменти та методи моделювання або обхідних корків локально
1. Локальний сервер проксі
Проксисування - одне з найбільш надійних і широко використовуваних рішень. Він передбачає запуску проксі-сервера, який виступає посередником між клієнтом та сервером API, ефективно направляючи запити перехресного походження через те саме походження, щоб уникнути проблем CORS.
-Сервери розробки із вбудованою підтримкою проксі: багато інструментів розробки переднього рівня, таких як Vite, WebPack Dev Server, або створюють підтримку додатків React, налаштовуючи проксі. Наприклад, створити додаток React Дозвольте розробникам визначати проксі в `packing.json` або` setupproxy.js`, який передає API, що передає API на інший сервер, що працює на іншому порту чи домені. Таким чином, браузер вважає, що він спілкується з тим самим походженням, оскільки запити надаються на сам сервер Dev, який потім пересилає їх на цільовий сервер API.
-автономні сервери проксі-серверів: такі інструменти, як HTTP-Proxy-Middleware (для Node.js) або локальні проксі-сервіси, такі як Nginx, налаштовані на локальних машинах, можуть служити проксі-сервісами для маршруту та додавати необхідні заголовки CORS. Розробники можуть налаштувати ці сервери для зміни відповідей на льоту, щоб включити `` контроль доступу-спалаху-походження: *`або інші відповідні заголовки.
2. CORS-enabled Local API Копії API
Запуск локального екземпляра API, який підтримує CORS, є ще одним ефективним підходом. Використовуючи Docker або Local Setup, розробники запускають API на своїх машинах за допомогою CORS, що ввімкнулися в режимі розробки, що дозволяє передній кінець, що працює на Localhost вільно спілкуватися без обмежень. Це має переваги повного контролю та без залежності від зовнішніх середовищ.
3. Розширення браузера для розвитку
Для швидкого тестування або налагодження багато розробників використовують розширення браузера, які тимчасово вимикають або змінюють поведінку CORS у браузерах. Ці інструменти повинні використовуватися лише в розробці, ніколи у виробництві:
- CORS UNCLOCK для Chrome: Це розширення змінює заголовки запитів та дозволяє перехресно-походження, вводячи необхідні заголовки на відповіді на обхід виконання браузера CORS.
- CORS скрізь для Firefox: Подібно до розширення Chrome, він перемикає та вимикає обмеження CORS, що дозволяє розробникам перевіряти дзвінки перехресного походження без зміни конфігурацій сервера.
- Меню розробки Safari: Safari дозволяє тимчасово відключати обмеження перехресного походження через меню, корисні для користувачів Mac, які роблять локальне тестування.
4. Запуск локального веб -сервера замість відкриття файлів
Однією з першопричиною помилок CORS є завантаження файлів безпосередньо з `file: //` протоколом у браузерах. Багато навчальних посібників та запитань вказують на те, що відкриття сторінок HTML безпосередньо без веб -сервера запускає помилки CORS, оскільки браузери блокують багато операцій для безпеки. Таким чином, запуск мінімального локального HTTP-сервера з використанням таких інструментів, як вбудований HTTP-сервер Python (`Python3 -M Http.server`), пакет HTTP-Server` Node, або Live-Server дозволяє правильним локальним походженням і уникає цих помилок.
5. Модифікація заголовків відповідей сервера
Розробляючи власну службу API або Backend, додавання заголовків CORS зазвичай проводиться, включаючи проміжне забезпечення або налаштування веб -сервера для підтримки CORS. Популярні рамки та мови встановили способи забезпечення CORS:
- Node.js/Express: Використання проміжного програмного забезпечення `CORS спрощує додавання заголовків CORS.
- ASP.NET Web API: підтримує такі атрибути, як `[enablecors]`, які дозволяють вказати походження, методи та заголовки, дозволені на перехресні запити.
-Django: Middleware, як `django-cors-headers`, використовується для підтримки CORS локально.
6.
Деякі онлайн -сервіси, такі як Beeceptor, дозволяють розробникам тестувати API та обхід CORS шляхом маршрутизації запитів через свої проксі -сервери. Ці послуги додають відповідні заголовки CORS, тому браузери приймають відповіді. Цей підхід корисний для швидкої налагодження, коли місцева установка не є здійсненною, але його слід використовувати обережно, а не у виробничих умовах.
***
Підсумок популярних інструментів та методик
- Проксі -сервер Dev: Використання можливостей проксі в таких інструментах, як Vite, створити додаток React, WebPack Dev Server.
-Локальні сервери проксі-серверів: HTTP-Proxy-Middleware у Node.js, Nginx налаштований як проксі.
- Локальний API з CORS Увімкнено: Запуск контейнерів Docker або локальні екземпляри API, налаштовані для розробки з CORS.
- Розширення браузера: CORS розблокувати (Chrome), CORS скрізь (Firefox), Safari відключити обмеження перехресного походження.
-локальний HTTP-сервер: запуск python 'http.server`, `http-server` вузла, або живий-сервер замість використання` file: // `urls.
-Backend Framework Middleware: `Cors` Package для Node.js,` [EnableCors] `в ASP.net Web API,` Django-Cors-headers` для Django.
- Сторонні послуги проксі-серверів: БЕЕКЕПТОР та подібні послуги з тимчасово обхід CORS.