Népszerű eszközök és módszerek a kereszt-eredetű kérések szimulálására a helyi fejlesztési környezetben elsősorban a böngészők által bevezetett keresztirányú erőforrás-megosztási (COR-k) korlátozások kezelése és megkerülése körül forognak. Ezek az eszközök segítenek a fejlesztőknek a kereszt-eredetű kölcsönhatások tesztelésében és hibakeresésében azáltal, hogy lehetővé teszik a COR-ok helyi szerverein, proxyk felhasználásával, vagy a böngésző kiterjesztéseinek és konfigurációinak kihasználásával. Az alábbiakban bemutatjuk az erre a célra alkalmazott általános megközelítésekről és eszközökről.
A CORS megértése
A kereszt-származási erőforrás-megosztás (COR) egy olyan böngészőkben valós biztonsági mechanizmus, amely korlátozza az egy eredetű (domain, protokoll, port) futó webes alkalmazásokat, hogy eltérő eredetű erőforrásokhoz férjen hozzá A COR-k olyan szerverek munkái, amelyek olyan fejléceket küldenek, mint például a „Access-Control-Awlow-Origin”, hogy jelezzék, mely tartományok engedélyezhetők az erőforrások eléréséhez. A böngészők ezt végrehajtják egy "preflight" kérés (HTTP opciók kérésére) küldésével bizonyos típusú kereszt-eredetű hívásokhoz, hogy ellenőrizzék az engedélyeket a tényleges kérés megkezdése előtt. A CORS fejlécek nemcsak az eredet megengedett, hanem a HTTP módszereket és fejléceket is használhatják, és hogy a hitelesítő adatok, például a sütik elküldhetők -e.
Helyi fejlesztési kihívások
A helyi fejlesztés során a projektek gyakran különböző lokális portokon vagy tartományokon működnek, amelyek különböző eredetűek és kiváltják a COR-k korlátozásait, megnehezítve a Cross-Oriigin kérések tesztelését. A fejlesztőknek olyan eszközökre vagy konfigurációkra van szükségük, amelyek helyben szimulálják vagy megkerülik ezeket a korlátozásokat, hogy a front-end és a háttérük megfelelő kommunikációját biztosítsák anélkül, hogy befolyásolnák a termelési környezetet.
Eszközök és módszerek a Cors helyi szimulálására vagy megkerülésére
1. Helyi szerver proxying
A proxying az egyik legmegbízhatóbb és legszélesebb körben használt megoldás. Ez magában foglalja egy proxy-kiszolgáló futtatását, amely közvetítőként működik az ügyfél és az API-kiszolgáló között, hatékonyan irányítva a kereszt-eredetű kéréseket ugyanazon eredeten keresztül, hogy elkerülje a COR-problémákat.
-Fejlesztési kiszolgálók beépített proxy-támogatással: Számos front-end fejlesztési eszköz, például a Vite, a Webpack Dev Server, vagy a React App támogatás létrehozása a proxy konfigurálására. Például a React alkalmazás létrehozása lehetővé teszi a fejlesztőknek a proxy meghatározását a „csomag.json” vagy a „setupproxy.js” című filmben, amely továbbítja az API -hívásokat egy másik porton vagy tartományon futó másik szerverhez. Ilyen módon a böngésző úgy gondolja, hogy ugyanazzal az eredetsel kommunikál, mivel a kéréseket magának a Dev Servernek teszik, amely ezután továbbítja őket a Target API szerverre.
-Önálló proxy-kiszolgálók: Az olyan eszközök, mint a HTTP-Proxy-Middleware (a Node.js-hez) vagy a helyi proxyk, például a helyi gépeken konfigurált NGINX, proxykként szolgálhatnak a kérelmek irányításához és a szükséges COR-os fejlécek hozzáadásához. A fejlesztők konfigurálhatják ezeket a szervereket a válaszok menet közbeni módosítására, hogy a „hozzáférés-kontroll-ólom-eredet: *” vagy más megfelelő fejléceket tartalmazzák.
2. Cors-kompatibilis helyi API-példányok
Egy másik hatékony megközelítés az API helyi példányának futtatása, amely támogatja a COR -kat. A Docker vagy a helyi beállítások használatával a fejlesztők az API-t futtatják a COR-kkal, amelyek fejlesztési módban engedélyezik a COR-kat, ami lehetővé teszi a Front-end futásának szabadon kommunikációját korlátozások nélkül. Ennek előnyei vannak a teljes ellenőrzésnek és a külső környezettől való függőségnek.
3. Böngésző kiterjesztései a fejlesztéshez
A gyors teszteléshez vagy hibakereséshez sok fejlesztő böngésző kiterjesztéseket használ, amelyek ideiglenesen letiltják vagy módosítják a COR -k viselkedését. Ezeket az eszközöket csak a fejlesztés során szabad használni, soha nem a gyártásban:
- A CORS UNCLOCK A CHROME-hoz: Ez a kiterjesztés módosítja a kérés fejléceit, és lehetővé teszi a kereszt-származási kérelmeket azáltal, hogy a szükséges fejléceket a böngésző CORS végrehajtásának megkerüléséhez szükséges válaszokba injektálják.
- Cors mindenütt a Firefox számára: Hasonlóan a Chrome kiterjesztéséhez, a COR-k korlátozásait be- és kikapcsolja, lehetővé téve a fejlesztők számára, hogy a keresztirányú hívásokat teszteljék a szerver konfigurációinak megváltoztatása nélkül.
- A Safari fejlesztési menüje: A Safari lehetővé teszi a menüben a kereszt-származási korlátozások ideiglenes letiltását, amely hasznos a Mac felhasználók számára, akik helyi tesztelést végeznek.
4. Helyi webszerver futtatása a fájlok megnyitása helyett
A CORS -hibák egyik kiváltó oka a fájlok közvetlenül a „Fájl: //” protokoll betöltése a böngészőkben. Számos oktatóprogram és kérdés és válasz rámutat arra, hogy a HTML oldalak közvetlenül a webszerver nélkül megnyitják a CORS hibákat, mivel a böngészők sok biztonságot blokkolnak. Így egy minimális helyi HTTP szerver futtatása olyan eszközökkel, mint például a Python beépített HTTP szervere (`Python3 -M http.server`), a Node` HTTP-Server` csomagja vagy élőszerver lehetővé teszi a helyes localhost eredeteket, és elkerüli ezeket a hibákat.
5. A szerver válaszfejlécek módosítása
Saját API vagy háttér -szolgáltatás fejlesztésekor a CORS fejlécek hozzáadását általában a köztes szoftver beillesztésével vagy a webszerver konfigurálásával kell megtenni a COR -k támogatására. A népszerű háttérkeretek és nyelvek meghatározták a COR -k engedélyezésének módjait:
- Node.js/Express: A `Cors` Middleware csomag használata egyszerűsíti a CORS fejlécek hozzáadását.
- ASP.NET WEB API: Támogatja az attribútumokat, mint például a „[EnableCors]”, amelyek lehetővé teszik az eredet, módszerek és fejlécek meghatározását, lehetővé teszik a kereszt-származási kérelmeket.
-Django: A köztes szoftvert, mint például a „Django-Cors-fejléc”, a COR-ok helyi támogatásának engedélyezésére szolgál.
6. A COR-k megkerülése nyilvános vagy harmadik fél általi meghatalmazásokkal
Egyes online szolgáltatások, például a Beeceptor lehetővé teszik a fejlesztők számára az API -k tesztelését és a COR -k megkerülését azáltal, hogy a kérelmeket proxy -kiszolgálóikon keresztül útválasztással irányítják. Ezek a szolgáltatások hozzáadják a megfelelő COR -os fejléceket, így a böngészők elfogadják a válaszokat. Ez a megközelítés hasznos a gyors hibakereséshez, ha a helyi beállítás nem megvalósítható, hanem óvatosan és nem termelési környezetben kell használni.
***
A népszerű eszközök és technikák összefoglalása
- Dev Server Prooxying: Proxy -képességek használata olyan eszközökben, mint a Vite, létrehozni a React alkalmazást, a WebPack Dev Server.
-Helyi proxy-kiszolgálók: HTTP-Proxy-Middleware a Node.js-ben, az Nginx proxyként konfigurálva.
- Helyi API a COR -kkal engedélyezve: Docker konténerek futtatása vagy a COR -kkal történő fejlesztéshez konfigurált helyi API -példányok futtatása.
- Böngésző kiterjesztései: CORS UNILLOCK (Chrome), Cors mindenhol (Firefox), a Safari letiltja a kereszt-származási korlátozásokat.
-Helyi HTTP szerver: Python „http.server”, csomópont „http-server” vagy élő-szerver futtatása helyett a „fájl: //` URLS használata helyett.
-Backend Framework köztes szoftver: `cors` csomag a node.js-hez,` [Enablecors] `Az ASP.NET Web API-ban, a Django-Cors-fejlők Django számára.
- Harmadik féltől származó proxy szolgáltatások: Beeceptor és hasonló szolgáltatások, hogy ideiglenesen megkerüljék a COR-kat.