[🚨Err Handling] Bobpago 배포 페이지 AccessDenied 에러

[pinion7]

어떤 에러인가요?

• Bobpago 배포 페이지에서 리다이렉트 및 새로고침 시에 AccessDenied 에러 발생

에러 메시지

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>0CXAPNW6EA9V5AGH</RequestId>
<HostId>3k6bjcxt1bFsyDTFs9YwZ12gWrhbx1exoE96sfeuIsQfFFw8G4JnXe8bosi4kOarqT1g/nanF0I=</HostId>
</Error>

에러 핸들링 방법

• 구글링을 통해 원인을 파악하였다. React와 CloudFront간의 호환성 문제이다. 풀어서 설명하자면, React와 같은 SPA를 통해 S3 - CloudFront 배포를 하게되면 Redirect문제가 발생하게 되는데, 이는 React에서 사용하는 react-router-dom때문이다. 호환문제로 CloudFront에서 redirect를 403으로 막은 것 이다. 그래서 이를 해결하려면 CloudFront에서 에러 핸들링을 해줘야한다.

• AWS CloudFront에 접속하여 오류 페이지에 대한 사용자 정의 오류 응답을 생성하였다. 403이 뜨면 200으로 전환될 수 있도록 전환해주었다.

에러 핸들링을 위해 참고한 레퍼런스 링크

https://velog.io/@_junukim/CloudFront%EB%A1%9C-React%EC%95%B1-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-2