logo

Jak odstraňovat chyby CORS Preflight / Options v roce 2022

TL;DR

Odkazujte na tento původní vývojový diagram, který jsem vytvořil pro tento příspěvek.

Úvod:Co je CORS? Co je předletová příprava? Co je metoda Možnosti?

The CORS znamená Cross-Origin Resource Sharing. Je důležité, když se aktuálně prohlížený web pokouší načíst zdroj, jako je JSON, z jiného webového serveru (cross-origin), protože prohlížeče omezují požadavky HTTP mezi různými zdroji iniciované skripty.

Z bezpečnostních důvodů pošlou prohlížeče před odesláním původního požadavku serveru cross-origin tzv. preflight request jehož hlavičky obsahují jak HTTP metodu, tak hlavičky, které budou použity v původním požadavku. Předtiskový požadavek používá HTTP OPTIONS metoda.

Pro přesnější definice a související diskuse je nejlepší oficiální dokument.

Zbytek tohoto příspěvku pojednává o běžných situačních otázkách a odpovědích na jejich řešení.

Otázka 1:Options požadavek je odeslán na koncový dev-server, ale stavový kód odpovědi je 405 (metoda není povolena). Co by měl frontend udělat, aby problém vyřešil? 

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://cors-2022.com. (Reason: XXX).

Odpověď 1

Můžete použít jednu ze dvou níže uvedených možností.

  1. Požádejte backend, aby zpracoval metodu volby. Požadavek před výstupem je v některých situacích z bezpečnostních důvodů nevyhnutelný a vhodný.

  2. Zvažte možnost přechodu z požadavku před výstupem na jednoduchý požadavek. Jednoduché požadavky nespustí předletovou kontrolu CORS.

Aby byl váš požadavek jednoduchý, musíte splnit všechny zde napsané podmínky.

Otázka 2:Backend-dev tým připravil pro náš frontend-dev tým útržek serveru automaticky generovaný Swagger Codegen. Ale vidím nějaké chyby CORS související s metodou možností.

Odpověď 2

Můžete použít jednu z posledních tří možností níže.

  1. (Ne ✋) Upravte implementaci útržku serveru ručně. Byla by to špatná volba, protože útržek serveru již nelze automaticky generovat.

  2. Předpokládejme, že vaše aplikace je vytvořena z Vue nebo React. Poté použijte vestavěné funkce proxy rámce, jako je React Dev Server Proxy (viz tento příspěvek) nebo Vue Proxy

  3. Použijte obecný proxy nástroj, jako je CORS Anywhere. Tento proxy manipuluje s hlavičkou požadavku, aby dočasně obešel ochranu CORS.

  4. Použijte rozšíření prohlížeče, například Allow CORS