React - S3 - CloudFront CORS 에러

React - S3 - CloudFront CORS 에러

WhiteList Headers

• 문제 발생

  React 에서 Axios.get 으로 CloudFront 로 연결된 S3 내부의 정적 파일 접근 시 CORS 에러 발생

• 문제 해결

  CloudFront 에 접근해도 CloudFront 는 S3와 연결되어 있으니 S3 의 Politic 과 CORS 정책이 문제가 있다고 판단하였고 설정을 바꿈 -> 원인 일부 맞지만 해결 안 됨

  React 에서 접근이 잘못된 방향으로 진행하는지 다시 한번 확인했고 CORS 해결책 중 하나인 Access-Control-Request-Headers 가 없어서 생기는 일이라고 판단했고 추가함 -> 원인 아님

  CloudFront 의 CORS 처리가 문제가 있다고 판단했고 Header 를 다루는 WhiteList Headers 를 설정 -> 해결

• 결론

  S3 에서 CORS 정책을 생성 뒤 Header 를 던져줘야 하며 CloudFront 에 접근하는 클라이언트가 이 Header 를 온전히 받으려면 CloudFront 도 마찬가지고 CORS 설정을 해야 함