← Cloudflare R2 / r2 / buckets

Konfigurace CORS

Cross-Origin Resource Sharing (CORS) ↗ je standardizovaná metoda, která brání doméně X v přístupu ke zdrojům domény Y. Využívá k tomu speciální hlavičky v odpovědích HTTP z domény Y, díky nimž prohlížeč ověří, že doména Y povoluje doméně X přístup k těmto zdrojům.

CORS sice pomáhá chránit vaše data před škodlivými weby, zároveň se ale používá i k práci s objekty ve vašem bucketu a ke konfiguraci zásad pro bucket.

CORS se používá, když s bucketem pracujete z webového prohlížeče, a máte dvě možnosti:

Nastavení bucketu jako veřejného: Tato možnost zpřístupní váš bucket na internetu v režimu pouze pro čtení, což znamená, že kdokoli může požadovat a načíst objekty z vašeho bucketu ve svém prohlížeči nebo kdekoli jinde. Tato možnost je ideální, pokud váš bucket obsahuje obrázky používané ve veřejném blogu.

Presigned URLs: Umožňuje komukoli s přístupem k jedinečné adrese URL provádět konkrétní akce s vaším bucketem.

Než nakonfigurujete CORS, musíte mít:

• Bucket R2 alespoň s jedním objektem. Pokud potřebujete bucket vytvořit, přečtěte si Vytvoření veřejného bucketu.
• Doména, kterou můžete použít pro přístup k objektu. Může to být také localhost.
• (Volitelné) Přístupové klíče. Přístupový klíč je nutný pouze při vytváření presigned URL.

Použití CORS s veřejným bucketem, ujistěte se, že je váš bucket nastaven tak, aby povoloval veřejný přístup.

Dále přidejte zásadu CORS do vašeho bucketu, aby bylo možné soubor sdílet.

Presigned URLs umožňují dočasný přístup k provádění konkrétních akcí s vaším bucketem, aniž byste vystavovali své přihlašovací údaje. Presigned URLs sice řeší ověřování, ale při odesílání požadavků z prohlížeče je stále nutné nakonfigurovat CORS.

Když prohlížeč odesílá požadavek na předem podepsanou URL adresu z jiného původu, vynucuje zásady CORS. Bez zásady CORS selžou nahrávání a stahování v prohlížeči pomocí předem podepsaných URL adres, i když je samotná předem podepsaná URL adresa platná.

Vypršené předem podepsané URL adresy vrátí 403 ExpiredRequest odpověď. R2 nezahrnuje hlavičky odpovědi CORS u odpovědí na vypršelé presigned URL, takže JavaScript v prohlížeči nemůže přečíst tělo chyby. Obnovujte presigned URL dříve, než vyprší jejich platnost, nebo směrujte požadavky přes svůj aplikační server, pokud prohlížeč potřebuje chyby vypršení platnosti zpracovat přímo.

Chcete-li povolit přístup z prohlížeče pomocí předem podepsaných URL adres:

1. Přidání zásady CORS do vašeho bucketu, které povoluje požadavky z originu vaší aplikace.

2. Nastavte AllowedMethods aby operace odpovídaly tomu, co provádí vaše podepsané URL, použijte GET, PUT, HEAD, a/nebo DELETE.

3. Nastavte AllowedHeaders aby zahrnovala všechny hlavičky, které klient odešle při použití podepsané URL, jako jsou hlavičky pro typ obsahu, kontrolní součty, cachování nebo vlastní metadata.

4. (Volitelné) Nastavte ExposeHeaders aby váš JavaScript mohl číst hlavičky odpovědi jako ETag, který obsahuje hash objektu a je užitečný pro ověřování nahrávání.

5. (Volitelné) Nastavte MaxAgeSeconds aby se odpověď na preflight požadavek uložila do cache a snížil se počet preflight požadavků, které prohlížeč odesílá.

Následující příklad umožňuje nahrávání z prohlížeče z https://example.com s Content-Type hlavičku:

[
  {
    "AllowedOrigins": ["https://example.com"],
    "AllowedMethods": ["PUT"],
    "AllowedHeaders": ["Content-Type"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

Vlastní domény připojené k R2 bucketu s CORS policy automaticky vracejí CORS hlavičky odpovědi pro cross-origin požadavky ↗.

Cross-origin požadavky musí obsahovat platnou Origin hlavičku požadavku, například Origin: https://example.com. Pokud testujete přímo nebo používáte nástroj příkazové řádky, jako je curl, neuvidíte CORS Access-Control-* hlavičky odpovědi, pokud Origin hlavička požadavku je zahrnuta v požadavku.

1. V dashboardu Cloudflare přejděte na Objektové úložiště R2 stránce.

   Přejděte na Přehled ↗

2. V seznamu vyhledejte a vyberte svůj bucket.

3. Vyberte Nastavení.

4. V části Zásady CORS, vyberte Přidání zásady CORS.

5. Z JSON kartě ručně zadejte nebo zkopírujte a vložte vaši zásadu do textového pole.

6. Až budete hotovi, vyberte Save.

Vaše zásada se zobrazí na Nastavení stránku pro váš bucket.

Pravidla CORS můžete nakonfigurovat pomocí Wrangler CLI.

1. Vytvořte soubor JSON s konfigurací CORS:

{
  "rules": [
    {
      "allowed": {
        "origins": ["https://example.com"],
        "methods": ["GET"]
      }
    }
  ]
}

2. Použijte zásadu CORS na svůj bucket:

npx wrangler r2 bucket cors set <BUCKET_NAME> --file cors.json

3. Ověřte, že se zásada CORS použila:

npx wrangler r2 bucket cors list <BUCKET_NAME>

Následující pole v zásadách CORS R2 odpovídají hlavičkám HTTP odpovědi. Tyto hlavičky odpovědi se vrací pouze tehdy, když je příchozí požadavek HTTP platným požadavkem CORS.

Tento příklad ukazuje zásady CORS přidané pro bucket, který obsahuje Roboto-Light.ttf objekt, což je soubor s fontem.

AllowedOrigins určit používaný webový server a localhost:3000 je název hostitele, na kterém běží webový server. AllowedMethods určit, že pouze GET požadavky jsou povoleny a mohou číst objekty ve vašem bucketu.

[
	{
		"AllowedOrigins": ["http://localhost:3000"],
		"AllowedMethods": ["GET"]
	}
]

Obecně platí, že dobrým způsobem, jak ověřit správné nastavení pravidel CORS, je podívat se na síťový požadavek, který váš prohlížeč blokuje.

• Ujistěte se, že pravidlo má AllowedOrigins zahrnuje origin, ze kterého je požadavek odeslán. (například http://localhost:3000 nebo https://yourdomain.com)
• Ujistěte se, že pravidlo má AllowedMethods obsahuje metodu blokovaného požadavku.
• Ujistěte se, že pravidlo má AllowedHeaders obsahuje hlavičky blokovaného požadavku.

Mějte také na paměti, že šíření pravidla CORS může ve výjimečných případech trvat až 30 sekund.

• Hlavičky odpovědi CORS obsahuje pouze požadavek typu cross-origin.
  • Cross-origin požadavek se pozná podle přítomnosti Origin hlavička požadavku HTTP s hodnotou Origin představující platný, povolený origin definovaný AllowedOrigins pole vaší politiky CORS.
  • Požadavek bez Origin hlavička požadavku HTTP bude ne nevrací žádné hlavičky odpovědi CORS. Hodnoty origin se musí shodovat přesně.
• Hodnota(y) pro AllowedOrigins ve vaší zásadě CORS musí být platný Hodnota hlavičky HTTP Origin ↗. Platný Origin hlavička dělá ne musí obsahovat komponentu cesty a smí se skládat pouze z scheme://host[:port] (přičemž port je volitelný).
  • Platný AllowedOrigins hodnota: https://static.example.com - zahrnuje schéma a hostitele. Port je volitelný a vyplývá ze schématu.
  • Neplatný AllowedOrigins hodnota: https://static.example.com/ nebo https://static.example.com/fonts/Calibri.woff2 - nesprávně zahrnuje součást cesty.
• Pokud potřebujete přistupovat ke konkrétním hodnotám hlaviček pomocí JavaScriptu na původní stránce, například při použití videopřehrávače, nezapomeňte nastavit Access-Control-Expose-Headers správně a zahrnout hlavičky, ke kterým váš JavaScript potřebuje mít přístup, například Content-Length.