𝗪𝗵𝘆 𝗟𝗼𝗰𝗮𝗹𝗵𝗼𝘀𝘁 𝗦𝘁𝗶𝗹𝗹 𝗧𝗿𝗶𝗴𝗴𝗲𝗿𝘀 𝗖𝗢𝗥𝗦 𝗘𝗿𝗿𝗼𝗿𝘀
Je draait je frontend op localhost:3000. Je draait je backend op localhost:5000. Beide apps staan op je laptop. Toch krijg je een CORS-fout.
Dit gebeurt vanwege de manier waarop browsers een origin definiëren.
Een origin bestaat uit drie onderdelen:
- Protocol
- Domein
- Poort
Vergelijk deze twee:
Ze gebruiken hetzelfde protocol. Ze gebruiken hetzelfde domein. Ze gebruiken verschillende poorten.
Browsers zien verschillende poorten als verschillende origins.
Wanneer je React-app je API aanroept, ziet de browser een cross-origin verzoek. De browser beschouwt ze als twee afzonderlijke entiteiten.
Waarom bestaat deze regel? Beveiliging.
Als websites vrijelijk elke API zouden kunnen aanroepen, zou een kwaadaardige site kunnen:
- Je bankgegevens lezen.
- Toegang krijgen tot privé-API's.
- Handelen namens jou.
Browsers gebruiken de Same-Origin Policy om dit te voorkomen. Website A kan geen toegang krijgen tot Website B, tenzij Website B toestemming geeft.
CORS staat voor Cross-Origin Resource Sharing. Het is een manier voor je server om de browser te vertellen: "Ik vertrouw verzoeken van deze specifieke origin."
Je lost dit op door een header aan je backend toe te voegen:
Access-Control-Allow-Origin: http://localhost:3000
Dit vertelt de browser dat het verzoek veilig is.
Een veelvoorkomend punt van verwarring: Je ziet het verzoek in je backend-logs verschijnen, maar de frontend faalt.
Dit gebeurt omdat:
- Frontend stuurt verzoek.
- Backend ontvangt verzoek succesvol.
- Backend stuurt reactie succesvol.
- Browser ontvangt reactie en blokkeert deze vanwege beveiligingsregels.
De fout is een beveiligingsfunctie van de browser.
Tools zoals Postman of cURL werken wel, omdat dit geen browsers zijn. Zij handhaven geen browserbeveiligingsregels.
De browser negeert het feit dat beide apps op je machine staan. Het kijkt alleen naar de origin.