Miért nem müködik a fetch javascriptben?

Emberi nyelven: A backenden engedélyeznek kéne csinálnod valamilyen CORS configurációt. Ez a backendtől függ hogy kell, de a legprimitívebb beállítás, ha megmondod neki, hogy minden kérést szolgáljon ki mindenhonnan.

Egy fokkal normálisabb megoldás, ha beállítod, hogy X helyről (ahol a frontended fut) jövő kéréseket szolgálja ki, ami ide valszeg bőven elég.

ChatGPT-4 válasza viszont sokkal szebb, de elvontabb. Nem trollkodásból szúrom be. A ChatGPT 4-es változata tényleg elég jó válaszokat adni. Nem olvastam végig, de bizots jó:

A probléma, amellyel szembesülsz, a Same-Origin Policy (SOP) és a Cross-Origin Resource Sharing (CORS) szabályaihoz kapcsolódik. A CORS egy biztonsági mechanizmus, amely megakadályozza, hogy a böngészők más domainekről származó erőforrásokat töltsenek be, hacsak az adott erőforrás engedélyezi ezt a viselkedést.

A hibaüzenet azt jelenti, hogy a Cloudflare API-nak a válaszában nincs 'Access-Control-Allow-Origin' fejléc, és a böngésződ nem engedélyezi a kérést.

A probléma megoldásához a következő lépéseket teheted meg:

1. Ellenőrizd, hogy a Cloudflare API támogatja-e a CORS-t. Nézd meg a dokumentációjukat, és győződj meg róla, hogy a helyes kérést küldöd el.

2. Ha lehetséges, a kérést küldd el az API-nak a szerveroldalról, és ne a kliensoldalról. Ez általában megoldja a CORS problémákat, mivel a szerveroldali kérések nem tartoznak a böngészők Same-Origin Policy szabályai alá. Például használhatsz Node.js-t a szerveroldalon, hogy elküldd a kérést.

3. Ha a szerveroldali megoldás nem lehetséges, és a CORS támogatása nem áll rendelkezésre az API-nál, akkor proxy szerver létrehozását is fontolóra veheted. A proxy szerver a saját domaineden futtatott szerver, amely továbbítja a kéréseket az API felé, és hozzáadja a szükséges CORS fejléceket a válaszokhoz.

Megjegyzés: Ha a proxy szerver mellett döntesz, gondoskodj a biztonsági intézkedésekről, például azáltal, hogy korlátozod a proxy által engedélyezett eredeteket és API hívásokat, illetve véded az API kulcsokat.