Populære verktøy og metoder for å simulere forespørsler om kryss-opprinnelse i lokale utviklingsmiljøer dreier seg først og fremst rundt håndtering og omgåelse av ressursdeling på tvers av opprinnelse (CORS) pålagt av nettlesere. Disse verktøyene hjelper utviklerne med å teste og feilsøke interaksjoner på kryss-opprinnelse ved å enten muliggjøre CORS på lokale servere, bruke proxy eller utnytte nettleserutvidelser og konfigurasjoner. Nedenfor er detaljert informasjon om noen vanlige tilnærminger og verktøy som brukes til dette formålet.
Forstå Cors
Ressursdeling på tvers av opprinnelse (CORS) er en sikkerhetsmekanisme implementert i nettlesere som begrenser webapplikasjoner som kjører på ett opprinnelse (domene, protokoll, port) fra å få tilgang til ressurser på et annet opprinnelse med mindre serveren eksplisitt tillater det gjennom spesifikke HTTP-overskrifter. CORS-verk av servere som sender tilbake overskrifter som `Access-Control-Allow-Origin` for å indikere hvilke domener som er tillatt tilgang til ressurser. Nettlesere håndhever dette ved å sende en "preflight" -forespørsel (en HTTP-opsjonsforespørsel) for visse typer samtaler på kryss-opprinnelse for å sjekke tillatelser før du fremsetter den faktiske forespørselen. CORS -overskrifter kontrollerer ikke bare hvilken opprinnelse som er tillatt, men også hvilke HTTP -metoder og overskrifter som kan brukes, og om legitimasjon som informasjonskapsler kan sendes.
Lokale utviklingsutfordringer
Under lokal utvikling kjører prosjekter ofte på forskjellige localhost-porter eller domener, noe som teller som forskjellige opprinnelser og utløser CORS-begrensninger, noe som gjør testing av forespørsler om kryss-opprinnelse vanskelig. Utviklere trenger verktøy eller konfigurasjoner som simulerer eller omgår disse begrensningene lokalt for å la front-end og back-end kommunisere ordentlig uten å påvirke produksjonsmiljøene.
Verktøy og metoder for å simulere eller omgå CORS lokalt
1. Lokal server -proxying
Proxying er en av de mest robuste og mye brukte løsningene. Det innebærer å kjøre en proxy-server som fungerer som en mellommann mellom klienten og API-serveren, og effektivt ruting av forespørsler om kryss-opprinnelse gjennom samme opprinnelse for å unngå CORS-problemer.
-Utviklingsservere med innebygd proxy-støtte: Mange front-end utviklingsverktøy som Vite, Webpack Dev Server eller Opprett React App Support Konfigurere en proxy. For eksempel, Create React -appen lar utviklere definere en proxy i `package.json` eller` setupproxy.js` som videresender API ringer til en annen server som kjører på en annen port eller domene. På denne måten tror nettleseren at den kommuniserer med samme opprinnelse siden forespørslene blir fremsatt til selve dev -serveren, som deretter videresender dem til Target API -serveren.
-Frittstående proxy-servere: Verktøy som HTTP-Proxy-Middleware (for Node.js) eller lokale fullmakter som Nginx konfigurert på lokale maskiner kan fungere som fullmakter for å rute forespørsler og legge til nødvendige CORS-overskrifter. Utviklere kan konfigurere disse serverne til å endre svar på farten for å inkludere `tilgangskontroll-allow-origin: *` eller andre passende overskrifter.
2. CORS-aktiverte lokale API-kopier
Å kjøre en lokal forekomst av API som støtter CORS er en annen effektiv tilnærming. Ved å bruke Docker eller lokale oppsett, kjører utviklere API på maskinene sine med CORS aktivert i utviklingsmodus, noe som gjør at front-end kjører på Localhost å kommunisere fritt uten begrensninger. Dette har fordelene med fullstendig kontroll og ingen avhengighet av ytre miljøer.
3.
For rask testing eller feilsøking bruker mange utviklere nettleserutvidelser som deaktiverer eller endrer CORS -oppførsel i nettlesere midlertidig. Disse verktøyene skal bare brukes i utvikling, aldri i produksjon:
- CORS Unblock for Chrome: Denne utvidelsen endrer forespørsler om forespørsler og aktiverer forespørsler på kryss-opprinnelse ved å injisere de nødvendige overskriftene på svar for å omgå nettleserens CORS-håndhevelse.
- CORS overalt for Firefox: I likhet med Chromes utvidelse, bytter den CORS-begrensningene av og på, slik at utviklere kan teste samtaler på tvers av opprinnelse uten å endre serverkonfigurasjoner.
- Safaris utviklingsmeny: Safari tillater midlertidig å deaktivere begrensninger på kryss-opprinnelse gjennom menyen, nyttig for Mac-brukere som gjør lokal testing.
4. Kjører en lokal webserver i stedet for å åpne filer
En årsak til CORS -feil er å laste inn filer direkte med ` -filen: //` protokoll i nettlesere. Mange opplæringsprogrammer og spørsmål og svar påpeker at åpning av HTML -sider direkte uten en webserver utløser CORS -feil fordi nettlesere blokkerer mange operasjoner for sikkerhet. Dermed kjører en minimal lokal HTTP-server ved hjelp av verktøy som Pythons innebygde HTTP-server (`Python3 -m http.server`)), nodes` http-server`-pakke, eller live-server tillater riktig lokalhost opprinnelse og unngår disse feilene.
5. Endre serverresponsoverskrifter
Når du utvikler din egen API- eller backend -tjeneste, gjøres det vanligvis å legge til CORS -overskrifter ved å inkludere mellomvare eller konfigurere webserveren til å støtte CORS. Populære backend -rammer og språk har etablert måter å muliggjøre CORS på:
- Node.js/Express: Bruke `Cors` mellomvarepakke forenkler å legge til CORS -overskrifter.
- ASP.NET Web API: Støtter attributter som `[EnableCors]` som tillater å spesifisere opprinnelse, metoder og overskrifter som er tillatt for forespørsler om kryss-opprinnelse.
-Django: Middleware som `Django-Cors-Headers` brukes til å muliggjøre CORS-støtte lokalt.
6. Omganger Cors med offentlige eller tredjeparts fullmakter
Noen online tjenester som Beeceptor lar utviklere teste API -er og omgå CORS ved å dirigere forespørsler gjennom proxy -serverne. Disse tjenestene legger til de aktuelle CORS -overskriftene, så nettlesere godtar svarene. Denne tilnærmingen er nyttig for rask feilsøking når lokalt oppsett ikke er gjennomførbart, men bør brukes forsiktig og ikke i produksjonsmiljøer.
***
Sammendrag av populære verktøy og teknikker
- Dev Server Proxying: Bruke proxyfunksjoner i verktøy som Vite, Opprett React -app, Webpack Dev Server.
-Lokale proxy-servere: http-proxy-middleware i node.js, nginx konfigurert som en proxy.
- Lokal API med CORS aktivert: Kjør Docker -containere eller lokale API -forekomster konfigurert for utvikling med CORS.
- Nettleserutvidelser: CORS Unblock (Chrome), CORS overalt (Firefox), Safari deaktiverer begrensninger på tvers av opprinnelse.
-Lokal HTTP-server: Kjører Pythons `http.server`, node's` http-server`, eller live-server i stedet for å bruke `fil: //` url.
-Backend Framework Middleware: `Cors` Package for Node.js,` [EnableCors] `i ASP.net Web API,` Django-Cors-Headers` for Django.
- Proxy-tjenester fra tredjepart: Beeceptor og lignende tjenester som midlertidig omgår CORS.