TL;DR
Verwijs naar dit originele stroomschema dat ik voor dit bericht heb gemaakt.
Inleiding:wat is CORS? Wat is preflight? Wat is de optiemethode?
The CORS staat voor Cross-Origin Resource Sharing. Het is van belang wanneer een momenteel bekeken website een bron zoals JSON probeert op te halen van een andere webserver (cross-origin), omdat browsers cross-origin HTTP-verzoeken die vanuit scripts worden geïnitieerd, beperken.
Als veiligheidsmaatregel sturen browsers, voordat ze het oorspronkelijke verzoek verzenden, een cross-origin-server een zogenaamde preflight request waarvan de headers zowel de HTTP-methode als de headers bevatten die in de oorspronkelijke aanvraag worden gebruikt. Het preflight-verzoek gebruikt de HTTP OPTIONS methode.
Voor meer precieze definities en gerelateerde discussies, is het officiële document het beste.
De rest van dit bericht bespreekt veelvoorkomende situationele vragen en antwoorden om ze op te lossen.
Vraag 1:Options verzoek wordt verzonden naar de backend-ontwikkelaarsserver, maar de antwoordstatuscode is 405 (methode niet toegestaan). Wat moet de frontend doen om het probleem op te lossen?
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://cors-2022.com. (Reason: XXX).
Antwoord 1
U kunt een van de twee onderstaande keuzes overnemen.
-
Vraag de backend om de optiemethode af te handelen. Een preflight-verzoek is in sommige situaties onvermijdelijk en gepast om veiligheidsredenen.
-
Overweeg de mogelijkheid om over te stappen van een preflight-verzoek naar een eenvoudig verzoek. Eenvoudige verzoeken activeren geen CORS-preflight.
Om uw verzoek eenvoudig te maken, moet u aan alle voorwaarden voldoen die hier zijn beschreven.
Vraag 2:Het backend-dev-team heeft een server-stub gemaakt die automatisch is gegenereerd door Swagger Codegen voor ons frontend-dev-team. Maar ik zie enkele CORS-fouten met betrekking tot de optiemethode.
Antwoord 2
Je kunt een van de laatste drie keuzes hieronder overnemen.
-
(Niet doen ✋) Wijzig de implementatie van de server stub handmatig. Het zou een slechte keuze zijn omdat een server-stub niet langer automatisch kan worden gegenereerd.
-
Stel dat je app is gemaakt van Vue of React. Gebruik vervolgens de ingebouwde proxyfuncties van het framework, zoals de React Dev Server Proxy (zie dit bericht) of Vue Proxy
-
Gebruik een algemene proxy-tool zoals CORS Anywhere. Deze proxy manipuleert de verzoekheader om tijdelijk de CORS-beveiliging te omzeilen.
-
Gebruik een browserextensie zoals CORS toestaan