Porozumenie CORS: Základy a tipy pre webový vývoj

V dnešnom svete prepojených webových aplikácií sa často stretávame s výzvami, ktoré sa na prvý pohľad môžu zdať zložité, no ich pochopenie je kľúčové pre každého, kto sa venuje webovému vývoju. Jednou z takýchto tém je aj Cross-Origin Resource Sharing, skrátene CORS. Možno ste sa s týmto pojmom už stretli pri riešení chýb vo vašej aplikácii, alebo ste o ňom počuli v kontexte bezpečnosti webu. Je to téma, ktorá sa dotýka prakticky každej moderné webovej aplikácie, či už si to uvedomujeme, alebo nie. Pochopenie CORS nie je len o technických detailoch, ale aj o tom, ako efektívne a bezpečne budovať robustné webové riešenia.

V podstate ide o mechanizmus, ktorý umožňuje prehliadačom bezpečne zdieľať zdroje medzi rôznymi doménami. Prečo je to dôležité? Pretože štandardne, z bezpečnostných dôvodov, prehliadače blokujú požiadavky z jednej domény na inú, pokiaľ nie sú explicitne povolené. CORS poskytuje spôsob, ako tieto obmedzenia obísť kontrolovaným a bezpečným spôsobom. V nasledujúcich riadkoch sa ponoríme do hĺbky tejto problematiky, rozoberieme jej základy, vysvetlíme rôzne scenáre a poskytneme praktické tipy, ktoré vám pomôžu pri vašej práci.

Tento článok je navrhnutý tak, aby vám poskytol komplexný prehľad o CORS. Začneme základnými pojmami, prejdeme na technické aspekty fungovania, vysvetlíme si bežné problémy a ich riešenia a nakoniec sa pozrieme na osvedčené postupy a tipy pre webových vývojárov. Cieľom je, aby ste po prečítaní tohto textu mali jasnejšiu predstavu o tom, ako CORS funguje, prečo je dôležitý a ako ho efektívne využívať vo vašich projektoch. Nezáleží na tom, či ste začiatočník alebo skúsený vývojár, verím, že si z tohto článku odnesiete cenné informácie.

Pochopenie Základov CORS

Keď hovoríme o webových aplikáciách, často si predstavíme jednu stránku, ktorá komunikuje so serverom. Realita je však oveľa komplexnejšia. Moderné webové aplikácie sú často zložené z viacerých častí, ktoré môžu bežať na rôznych serveroch alebo dokonca na rôznych doménach. Napríklad, vaša frontendová aplikácia môže byť hostovaná na mojadomena.com, ale API, s ktorým komunikuje, môže byť umiestnené na api.mojadomena.com alebo dokonca na úplne inej doméne, ako je externyservis.com. Tu nastupuje problém, ktorý rieši CORS.

Prečo Prehliadače Blokujú Požiadavky Medzi Doménami?

Hlavným dôvodom pre toto správanie je Same-Origin Policy (SOP). Je to bezpečnostný mechanizmus implementovaný vo všetkých moderných prehliadačoch. SOP zabraňuje tomu, aby skripty z jednej pôvodnej (origin) mohli pristupovať k dátam alebo vykonávať akcie na inej pôvodnej. Pôvod je definovaný kombináciou schémy (protokol, napr. http alebo https), hostiteľa (doména, napr. www.example.com) a portu (napr. 80 alebo 443).

Predstavte si, že ste prihlásený do svojej internetovej banky na moja-banka.com. Ak by ste potom navštívili škodlivú stránku zly-web.com a táto stránka by mohla jednoducho posielať požiadavky na moja-banka.com v mene vášho prehliadača, mohla by získať prístup k vašim citlivým informáciám alebo dokonca vykonávať transakcie. SOP tomuto scenáru predchádza. Bez nej by bol web oveľa menej bezpečný.

Čo je To „Origin“?

Ako už bolo spomenuté, origin (pôvod) je kľúčovým pojmom. Zjednodušene povedané, dve URL adresy majú rovnaký pôvod, ak sa zhodujú v týchto troch častiach:

• Schéma/Protokol: http vs. https – tieto sa považujú za rôzne pôvody.
• Hostiteľ/Doména: www.example.com vs. sub.example.com – tieto sa tiež považujú za rôzne pôvody.
• Port: www.example.com:80 vs. www.example.com:8080 – rôzne porty znamenajú rôzne pôvody.

Ak sa akákoľvek z týchto troch zložiek líši, ide o cross-origin požiadavku. Napríklad, požiadavka z https://app.mojadomena.com na https://api.mojadomena.com je cross-origin, rovnako ako požiadavka z http://localhost:3000 na https://mojadomena.com.

CORS ako Riešenie Problému SOP

CORS je špecifikácia, ktorá umožňuje serverom explicitne povoliť cross-origin požiadavky. Namiesto toho, aby prehliadač automaticky blokoval všetky takéto požiadavky, CORS definuje mechanizmus, pomocou ktorého server môže oznámiť prehliadaču, ktoré pôvody sú povolené na prístup k jeho zdrojom. Toto sa deje prostredníctvom HTTP hlavičiek. Server odpovedá hlavičkami, ktoré informujú prehliadač, či je daná cross-origin požiadavka povolená.

Je dôležité pochopiť, že CORS nie je bezpečnostné riziko samo o sebe. Naopak, je to bezpečný spôsob, ako umožniť zdieľanie zdrojov. Bezpečnosť je stále zabezpečená, pretože server má plnú kontrolu nad tým, kto a odkiaľ sa k jeho zdrojom môže pripojiť. Prehliadač funguje ako prostredník, ktorý vynucuje pravidlá definované serverom.

Ako CORS Funguje: Technické Detaily

Aby sme plne pochopili CORS, musíme sa pozrieť na to, ako prebieha komunikácia medzi prehliadačom a serverom, keď je CORS relevantný. Tento proces zahŕňa špecifické HTTP hlavičky, ktoré prehliadač a server vymieňajú. Existujú dva hlavné typy CORS požiadaviek: jednoduché požiadavky (simple requests) a predbežné požiadavky (preflight requests).

Jednoduché Požiadavky (Simple Requests)

Niektoré typy HTTP požiadaviek sa považujú za „jednoduché“ a nevyžadujú predbežnú kontrolu. Aby bola požiadavka považovaná za jednoduchú, musí spĺňať nasledujúce kritériá:

• Musí používať jednu z povolených metód: GET, HEAD, alebo POST.
• HTTP hlavičky musia byť obmedzené na tie, ktoré sú považované za bezpečné a jednoduché. Sem patria hlavičky ako Accept, Accept-Language, Content-Language, Content-Type (ale iba s určitými hodnotami ako application/x-www-form-urlencoded, multipart/form-data, alebo text/plain), a vlastné hlavičky, ktoré začínajú na X-.

Ak vaša požiadavka spĺňa tieto podmienky, prehliadač ju pošle priamo na server. Server potom musí v odpovedi pridať špecifické CORS hlavičky, aby povolil prístup. Najdôležitejšie hlavičky, ktoré server posiela v odpovedi, sú:

• Access-Control-Allow-Origin: Táto hlavička je absolútne kľúčová. Určuje, ktorý pôvod (alebo pôvody) má povolený prístup k zdroju. Môže obsahovať konkrétnu doménu (napr. https://app.mojadomena.com), alebo hviezdičku (*), ktorá znamená, že prístup je povolený pre akýkoľvek pôvod. Použitie * je však často nevhodné z bezpečnostných dôvodov, najmä pri citlivých dátach.
• Access-Control-Allow-Methods: Ak je povolená metóda iná ako GET, HEAD alebo POST, táto hlavička informuje prehliadač o povolených metódach (napr. GET, POST, PUT, DELETE).
• Access-Control-Allow-Headers: Táto hlavička umožňuje prehliadaču vedieť, ktoré hlavičky sú povolené v samotnej požiadavke.
• Access-Control-Allow-Credentials: Ak chcete povoliť posielanie cookies alebo HTTP autentizačných hlavičiek s cross-origin požiadavkou, musíte nastaviť túto hlavičku na true. V tomto prípade nemôžete použiť * pre Access-Control-Allow-Origin, musíte explicitne uviesť povolené pôvody.
• Access-Control-Expose-Headers: Táto hlavička umožňuje prehliadaču dostať sa k hlavičkám, ktoré nie sú štandardne sprístupnené z dôvodu SOP.

Ak server nepošle správne hlavičky, prehliadač zablokuje odpoveď a vo vývojárskych nástrojoch prehliadača sa zobrazí chyba súvisiaca s CORS.

Predbežné Požiadavky (Preflight Requests)

Ak vaša požiadavka nespĺňa kritériá „jednoduchých požiadaviek“, prehliadač ju automaticky označí ako complex request a pred jej skutočným odoslaním vykoná predbežnú požiadavku (preflight request). Predbežná požiadavka sa zvyčajne vykonáva pomocou HTTP metódy OPTIONS. Cieľom tejto požiadavky je zistiť od servera, či je skutočná požiadavka povolená.

Predbežná požiadavka obsahuje nasledujúce kľúčové hlavičky:

• Access-Control-Request-Method: Informuje server o HTTP metóde, ktorú bude skutočná požiadavka používať (napr. PUT).
• Access-Control-Request-Headers: Informuje server o akýchkoľvek vlastných hlavičkách, ktoré budú prítomné v skutočnej požiadavke (napr. Content-Type, Authorization).
• Origin: Hlavička, ktorá vždy obsahuje pôvod iniciujúcej požiadavky.

Server na predbežnú požiadavku odpovie hlavičkami, ktoré mu umožnia rozhodnúť, či povolí alebo zamietne skutočnú požiadavku. Kľúčové hlavičky v odpovedi na predbežnú požiadavku sú:

• Access-Control-Allow-Origin: Rovnako ako pri jednoduchých požiadavkách, táto hlavička určuje povolené pôvody.
• Access-Control-Allow-Methods: Uvádza zoznam metód povolených pre daný zdroj.
• Access-Control-Allow-Headers: Uvádza zoznam hlavičiek povolených v skutočnej požiadavke.
• Access-Control-Max-Age: (Voliteľné) Určuje, ako dlho môže prehliadač ukladať do cache výsledok predbežnej požiadavky. To môže pomôcť znížiť počet zbytočných OPTIONS požiadaviek.

Ak server odpovie na predbežnú požiadavku hlavičkami, ktoré schvaľujú požadovanú metódu a hlavičky, prehliadač potom odošle skutočnú (napr. PUT alebo POST) požiadavku. Ak odpoveď nie je v súlade s tým, čo prehliadač očakáva, skutočná požiadavka sa neodošle a prehliadač zobrazí chybu.

Dôležité: Ak server neodpovie na predbežnú požiadavku vôbec, alebo odpovie chybou, prehliadač zablokuje skutočnú požiadavku.

Bežné Scenáre a Riešenia Problémov s CORS

Problémy s CORS sú jedným z najčastejších dôvodov, prečo sa vývojári stretávajú s chybami pri práci s API alebo pri integrácii rôznych služieb. Pochopenie týchto scenárov a ich riešení vám môže ušetriť veľa času a frustrácie.

Scenár 1: Frontend Aplikácia a Samostatné API

Toto je asi najbežnejší scenár. Máte frontendovú aplikáciu (napr. React, Vue, Angular) bežiacu na jednej doméne (napr. localhost:3000 počas vývoja, alebo app.mojadomena.com v produkcii) a API, ktoré poskytuje dáta, bežiace na inej doméne (napr. api.mojadomena.com alebo dokonca externyservis.com).

• Problém: Keď váš frontend JavaScript pošle požiadavku na API, prehliadač zistí, že pôvod frontendu sa líši od pôvodu API. Ak API nemá správne nastavené CORS hlavičky, prehliadač požiadavku zablokuje.
• Riešenie: Musíte nakonfigurovať váš API server tak, aby povolil cross-origin požiadavky z vašej frontendovej domény.
  • Vo vašom backendovom kóde (napr. v Express.js, Flask, Spring Boot) musíte pridať logiku na pridávanie CORS hlavičiek do odpovedí.
  • Najjednoduchšie je použiť existujúce CORS knižnice pre váš framework. Napríklad v Node.js s Expressom môžete použiť balík cors.
  • Nastavenie by malo vyzerať približne takto:

    const express = require('express');
    const cors = require('cors');
    const app = express();
    
    const corsOptions = {
      origin: 'https://app.mojadomena.com', // Povoľte iba vašu frontendovú doménu
      methods: 'GET,POST,PUT,DELETE', // Povoľte konkrétne metódy
      allowedHeaders: 'Content-Type,Authorization', // Povoľte konkrétne hlavičky
      credentials: true // Ak potrebujete posielať cookies
    };
    
    app.use(cors(corsOptions));
    
    // ... vaše API routy
    

  • Pre vývojové prostredie (localhost) môžete často použiť origin: '*', ale v produkcii by ste mali vždy špecifikovať povolené domény.
  • Ak pracujete s credentials: true, nezabudnite na Access-Control-Allow-Origin nastaviť konkrétnu doménu namiesto *.

Scenár 2: Použitie Externých API alebo Služieb

Často potrebujete integrovať vašu aplikáciu s externými službami, ktoré poskytujú API (napr. platobné brány, služby na odosielanie e-mailov, mapové služby).

• Problém: Ak sa pokúšate z vášho frontendu priamo volať externé API, ktoré nie je nakonfigurované na povolenie CORS z vašej domény, narazíte na problémy.
• Riešenie:
  • Skontrolujte dokumentáciu externého API: Najprv sa pozrite, či poskytovateľ API explicitne uvádza, že podporuje CORS a aké sú jeho požiadavky. Často uvádzajú povolené hlavičky a pôvody.
  • Použite proxy server: Ak externé API nepodporuje CORS, najlepším riešením je vytvoriť si vlastný backendový proxy server. Váš frontend posiela požiadavky na váš vlastný proxy server (ktorý je na rovnakej doméne ako frontend alebo má povolené CORS), a proxy server potom presmeruje požiadavku na externé API. Tento proxy server potom prijme odpoveď z externého API a pošle ju späť na frontend s pridanými CORS hlavičkami. Toto skryje externé API pred priamou komunikáciou s vaším klientom a tým obíde obmedzenia CORS.
  • Príklad proxy v Node.js/Express:

    const express = require('express');
    const axios = require('axios'); // Pre jednoduché HTTP požiadavky
    const cors = require('cors');
    const app = express();
    
    const corsOptions = {
      origin: 'https://app.mojadomena.com',
      methods: 'GET,POST',
      allowedHeaders: 'Content-Type,Authorization',
      credentials: true
    };
    
    app.use(cors(corsOptions));
    
    app.get('/api/external-data', async (req, res) => {
      try {
        const response = await axios.get('https://api.externyservis.com/data', {
          headers: {
            'Authorization': req.headers.authorization // Prenesenie autentizačných hlavičiek
          }
        });
        res.json(response.data);
      } catch (error) {
        res.status(error.response?.status || 500).json({ message: 'Chyba pri načítavaní externých dát' });
      }
    });
    
    // ... ďalšie routy
    

Scenár 3: Vývoj v Lokálnom Prostredí (localhost)

Často sa stretávame s chybami CORS počas vývoja, keď frontend beží na localhost:3000 a API na localhost:8000 alebo dokonca na vzdialenom serveri.

• Problém: Prehliadač považuje http://localhost:3000 a http://localhost:8000 za rôzne pôvody.
• Riešenie:
  • Konfigurácia lokálneho API servera: Najjednoduchšie je nakonfigurovať váš lokálny API server tak, aby povolil CORS požiadavky z vášho frontendového pôvodu (http://localhost:3000). Väčšina CORS knižníc podporuje nastavenie origin: 'http://localhost:3000'.
  • Použitie * (s opatrnosťou): Pre lokálne vývojové prostredie môžete niekedy použiť origin: '*', ale toto by sa nemalo používať v produkcii.
  • Proxy v nástrojoch na zostavenie (Build Tools): Moderné nástroje na zostavenie ako Webpack Dev Server alebo Vite majú vstavané proxy funkcie. Môžete nakonfigurovať proxy, ktoré presmeruje všetky požiadavky na /api z vášho frontendového vývojového servera na váš API server. Tým sa zabráni tomu, aby prehliadač vôbec videl cross-origin požiadavku.
    • Príklad v webpack.config.js:

      // ...
      devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:8000', // URL vášho API servera
            changeOrigin: true,
            pathRewrite: { '^/api': '' }, // Voliteľné: odstráni '/api' z cesty pred presmerovaním
          },
        },
      },
      // ...
      

    • V tomto prípade by váš frontend volal http://localhost:3000/api/users a Webpack Dev Server by túto požiadavku presmeroval na http://localhost:8000/users.

Scenár 4: Chyby pri Použití credentials: true

Ak vaša aplikácia potrebuje posielať cookies alebo autentizačné hlavičky (napr. Authorization hlavička) s cross-origin požiadavkou, musíte explicitne povoliť toto správanie.

• Problém: Prehliadače štandardne neposielajú cookies s cross-origin požiadavkami. Ak sa pokúsite poslať cookies bez správneho nastavenia CORS, požiadavka bude zamietnutá.
• Riešenie:
  • Na strane servera: Nastavte hlavičku Access-Control-Allow-Credentials na true v odpovedi servera.
  • Dôležité obmedzenie: Ak používate Access-Control-Allow-Credentials: true, nemôžete použiť Access-Control-Allow-Origin: '*'. Musíte explicitne uviesť povolený pôvod (napr. Access-Control-Allow-Origin: 'https://app.mojadomena.com').
  • Na strane klienta (JavaScript Fetch/XHR): Pri vytváraní požiadavky musíte nastaviť atribút credentials na include.

    fetch('https://api.mojadomena.com/protected-data', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        // Ak posielate vlastné hlavičky, uistite sa, že sú povolené aj v Access-Control-Allow-Headers
        // 'Authorization': 'Bearer vas_token'
      },
      credentials: 'include' // Toto je kľúčové pre posielanie cookies
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Chyba:', error));
    

Osvedčené Postupy a Tipy pre Webových Vývojárov

Okrem technického pochopenia CORS je dôležité dodržiavať aj určité osvedčené postupy, ktoré vám pomôžu vyhnúť sa problémom a zabezpečiť vaše aplikácie.

1. Nikdy Nedôverujte Klientovi

Toto je základné pravidlo bezpečnosti. Aj keď CORS vyzerá ako mechanizmus na strane klienta (prehliadača), skutočné rozhodnutia o povolení prístupu musia byť vykonané na strane servera. Nikdy nepredpokladajte, že hlavičky poslané klientom sú spoľahlivé. Vždy overujte pôvod a povolenia na backendovej strane.

"Bezpečnosť vášho API začína na serveri, nie v prehliadači."

2. Buďte Granulárny s Povoleniami

Vyhnite sa používaniu zástupného znaku * pre Access-Control-Allow-Origin vo vašom produkčnom prostredí, pokiaľ to nie je absolútne nevyhnutné a plne si uvedomujete dôsledky. Vždy špecifikujte konkrétne domény, ktoré majú povolený prístup. To isté platí pre Access-Control-Allow-Methods a Access-Control-Allow-Headers. Povoľte len tie metódy a hlavičky, ktoré vaša aplikácia skutočne potrebuje.

3. Využite Proxy pre Externé API

Ako už bolo spomenuté, ak sa stretnete s externým API, ktoré nepodporuje CORS, vytvorenie vlastného backendového proxy servera je elegantné a bezpečné riešenie. Váš proxy server beží na vašej dôveryhodnej doméne a komunikuje s externým API, čím obchádza obmedzenia prehliadača.

4. Testujte v Rôznych Prehliadačoch

Aj keď sa CORS štandard snaží byť konzistentný, môžu existovať drobné rozdiely v implementácii medzi prehliadačmi. Vždy testujte svoje aplikácie v rôznych prehliadačoch, aby ste sa uistili, že CORS funguje správne.

5. Správne Nastavenie Content-Type

Pri používaní POST alebo iných metód, ktoré odosielajú telo požiadavky, je hlavička Content-Type často kľúčová pre to, či sa požiadavka považuje za „jednoduchú“. Ak použijete Content-Type, ktorý nie je v zozname povolených pre jednoduché požiadavky (napr. application/json), bude vaša požiadavka považovaná za komplexnú a spustí sa predbežná OPTIONS požiadavka.

Tabuľka 1: Rozdiel medzi Jednoduchými a Komplexnými Požiadavkami

Kritérium	Jednoduchá Požiadavka	Komplexná Požiadavka
HTTP Metóda	GET, HEAD, POST	Akákoľvek iná metóda (napr. PUT, DELETE, PATCH)
HTTP Hlavičky	Accept, Accept-Language, Content-Language, Content-Type (s obmedzenými hodnotami), X-*	Akékoľvek iné hlavičky (vrátane Content-Type: application/json)
Preflight Požiadavka	Nie je potrebná	Vykonáva sa (OPTIONS metóda) pred skutočnou požiadavkou
Príklad Content-Type	application/x-www-form-urlencoded, multipart/form-data, text/plain	application/json

6. Používajte Vývojárske Nástroje Prehliadača

Vývojárske nástroje vo vašom prehliadači (zvyčajne dostupné stlačením F12) sú neoceniteľným pomocníkom pri diagnostike problémov s CORS. Sekcia "Network" vám ukáže všetky odoslané požiadavky a ich odpovede. Chyby sú zvyčajne jasne označené a často obsahujú užitočné správy o tom, prečo bola požiadavka zamietnutá. Venujte pozornosť hlavičkám v odpovediach.

"Vývojárske nástroje prehliadača sú vašimi najlepšími priateľmi pri riešení problémov s CORS."

7. Zvážte Bezpečnostné Dôsledky Access-Control-Allow-Credentials

Povolenie posielania cookies cez CORS (credentials: true) je silná funkcia, ale zároveň predstavuje bezpečnostné riziko, ak nie je správne implementovaná. Uistite sa, že váš backend správne overuje autenticitu používateľa a že cookies sú správne zabezpečené (napr. pomocou HttpOnly a Secure atribútov, ak je to možné).

Tabuľka 2: Kľúčové CORS Hlavičky a Ich Účel

Hlavička	Typ Požiadavky	Kde sa Používa (Požiadavka/Odpoveď)	Popis
Origin	Všetky	Klient -> Server	Hlavička odoslaná klientom, ktorá identifikuje pôvod iniciujúcej požiadavky.
Access-Control-Request-Method	Predbežná (OPTIONS)	Klient -> Server	Hlavička odoslaná klientom, ktorá informuje server o HTTP metóde, ktorú bude skutočná požiadavka používať.
Access-Control-Request-Headers	Predbežná (OPTIONS)	Klient -> Server	Hlavička odoslaná klientom, ktorá informuje server o akýchkoľvek vlastných hlavičkách, ktoré budú v skutočnej požiadavke.
Access-Control-Allow-Origin	Všetky (Odpoveď)	Server -> Klient	Najdôležitejšia hlavička. Určuje, ktorý pôvod (alebo pôvody) má povolený prístup k zdroju. Môže byť konkrétna doména alebo *.
Access-Control-Allow-Methods	Všetky (Odpoveď)	Server -> Klient	Informuje prehliadač o HTTP metódach, ktoré sú povolené pre daný zdroj (napr. GET, POST, PUT, DELETE).
Access-Control-Allow-Headers	Všetky (Odpoveď)	Server -> Klient	Informuje prehliadač o hlavičkách, ktoré sú povolené v skutočnej požiadavke.
Access-Control-Allow-Credentials	Všetky (Odpoveď)	Server -> Klient	Určuje, či sú povolené cross-origin požiadavky s pripojenými povereniami (napr. cookies). Vyžaduje explicitné uvedenie pôvodu.
Access-Control-Max-Age	Predbežná (Odpoveď)	Server -> Klient	(Voliteľné) Určuje, ako dlho môže prehliadač ukladať do cache výsledok predbežnej požiadavky.
Access-Control-Expose-Headers	Všetky (Odpoveď)	Server -> Klient	Umožňuje prehliadaču dostať sa k hlavičkám, ktoré nie sú štandardne sprístupnené (napr. vlastné hlavičky servera).

FAQ: Často Kladené Otázky o CORS

Prečo vidím chybu "No 'Access-Control-Allow-Origin' header is present on the requested resource"?

Táto chyba znamená, že váš prehliadač vykonal cross-origin požiadavku, ale server, ktorý na ňu odpovedal, neposlal hlavičku Access-Control-Allow-Origin alebo ju poslal so zlým obsahom. Server musí explicitne povoliť váš pôvod.

Môžem použiť Access-Control-Allow-Origin: '*' v produkcii?

Všeobecne sa to neodporúča, najmä ak váš API obsahuje citlivé dáta. Použitie * umožňuje prístup z akéhokoľvek pôvodu, čo môže byť bezpečnostné riziko. Ak potrebujete povoliť prístup z viacerých domén, je lepšie ich vymenovať explicitne, alebo použiť proxy server.

Ako povolím posielanie cookies s cross-origin požiadavkami?

Musíte nastaviť hlavičku Access-Control-Allow-Credentials na true na strane servera a použiť credentials: 'include' na strane klienta (v JavaScript fetch alebo XHR požiadavke). Nezabudnite, že pri použití credentials: true nemôžete použiť Access-Control-Allow-Origin: '*', musíte uviesť konkrétny povolený pôvod.

Čo je to predbežná (preflight) požiadavka a kedy sa vykoná?

Predbežná požiadavka je OPTIONS požiadavka, ktorú prehliadač automaticky odošle pred skutočnou cross-origin požiadavkou, ak táto nie je „jednoduchá“. Vykoná sa, ak používate HTTP metódy iné ako GET, HEAD, POST, alebo ak posielate vlastné HTTP hlavičky (napr. Authorization, Content-Type: application/json).

Ako sa vyhnúť CORS problémom počas lokálneho vývoja?

Najčastejšie riešenia sú:

1. Nakonfigurovať váš lokálny backend server tak, aby povolil CORS z vášho frontendového localhost adresy (napr. http://localhost:3000).
2. Využiť proxy funkciu vo vašom vývojovom serveri (Webpack, Vite), ktorá presmeruje API požiadavky na váš backend bez toho, aby prehliadač videl cross-origin požiadavku.

Je CORS vždy chyba na strane servera?

Nie vždy. Niekedy môže byť problém v tom, ako je napísaný kód na strane klienta, napríklad ak sa nesprávne nastavuje Content-Type hlavička, alebo ak sa očakáva iná metóda, ako je povolená. Vždy najprv skontrolujte vývojárske nástroje prehliadača.

Môžem zmeniť CORS hlavičky na strane klienta?

Nie, CORS hlavičky sú posielané iba serverom a sú súčasťou jeho odpovede. Prehliadač ich kontroluje. Klient nemôže tieto hlavičky falošne nastaviť, aby obišiel bezpečnostné pravidlá.

Čo ak externé API nepodporuje CORS?

V takom prípade je najlepším riešením vytvoriť si vlastný backendový proxy server. Váš frontend komunikuje s vaším proxy serverom, a ten následne komunikuje s externým API. Týmto spôsobom obídete obmedzenia prehliadača.

Ako funguje Access-Control-Expose-Headers?

Štandardne prehliadač sprístupňuje len obmedzený zoznam hlavičiek z odpovede servera. Ak chcete, aby váš JavaScript kód mohol čítať aj iné hlavičky (napr. vlastné hlavičky ako X-Total-Count), musíte ich explicitne vymenovať v hlavičke Access-Control-Expose-Headers na strane servera.

Existuje nejaký spôsob, ako úplne vypnúť CORS?

Nie, prehliadače nemajú možnosť vypnúť CORS. Je to základné bezpečnostné pravidlo. Ak by ste chceli robiť nejaké experimenty, môžete použiť rozšírenia prehliadača, ktoré dočasne vypnú kontrolu CORS, ale toto je veľmi nebezpečné a nikdy by sa nemalo používať v produkcii ani na citlivých stránkach.