RSS DEV 커뮤니티
팔로우
CORS 때문에 거의 포기할 뻔했지만, 사전 요청(Preflight) 덕분에 해결했어요.
저자는 처음에 S3를 프론트엔드, Apollo GraphQL을 백엔드, 그리고 그 사이에 API Gateway를 두어 프론트엔드-백엔드 시스템을 구축했습니다. 하지만 프론트엔드 요청이 백엔드에 도달하지 못하게 하는 교차 출처 리소스 공유(CORS) 오류에 직면했습니다. 브라우저는 신뢰 및 보안 프로토콜 부족으로 인해 요청을 차단했습니다. CORS는 버그가 아니라 교차 출처 요청을 제한하는 내장 보안 기능입니다. 브라우저는 실제 요청 전에 사전 요청 확인을 위해 OPTIONS 요청을 보냅니다. 사전 요청 중에 서버 또는 API Gateway가 올바르게 응답하지 않으면 브라우저는 요청을 차단합니다. 해결책은 API Gateway에서 OPTIONS 요청을 올바르게 처리하는 것이었습니다. 그런 다음 백엔드는 환경 변수를 통해 프론트엔드 도메인을 명시적으로 허용했습니다. CORS 문제 디버깅은 네트워크 탭에서 사전 요청을 확인해야 합니다. 사전 요청과 백엔드 도메인 권한을 올바르게 처리함으로써 CORS로 인한 골칫거리를 해결했습니다.
