DEV Community
Follow
CORS Almost Broke Me But Preflight Saved the Day
The author initially set up a frontend-backend system with S3 for the frontend, Apollo GraphQL for the backend, and API Gateway in between. They encountered cross-origin resource sharing (CORS) errors preventing frontend requests from reaching the backend. The browser blocked requests due to a lack of trust and security protocols. CORS isn't a bug, but instead a built-in security feature that restricts cross-origin requests. The browser sends an OPTIONS request for preflight checks before actual requests. If the server or API Gateway doesn't respond correctly during preflight, the browser blocks the request. The solution involved correctly handling OPTIONS requests in the API Gateway. The backend then explicitly allowed the frontend domain through environment variables. Debugging CORS issues requires checking the preflight request in the Network tab. Proper handling of preflight and backend domain permission resolved the CORS headaches.
