브라우저 캐시로 인한 CORS 에러

문제

클리이언트에서 aws s3에 저장된 이미지를 blob 객체로 다운 받으려고 할 때, CORS 에러가 났었다. 분명 aws s3에서도 cors를 설정 해두었고, 서버 쪽에서도 cors 설정을 해두었는데도 에러가 나서 도데체 무슨 이유인지 알 수 없었다.

해결방안

이로 인해 해결 방안을 찾던 중 답은 캐쉬에 있다는 것을 알게 되었다.

설명

1. 브라우저는 일부 태그(img, script)를 통해 리소스를 요청할 CORS를 제한하지 않는다. CORS를 제한하지 않기에 HTTP 요청시 Origin 헤더를 추가하지 않는데 이때, AWS S3에서는 요청에 Origin 헤더가 없을 경우 CORS 응답헤더를 전달하지 않는다. 그래서 해당 응답을 브라우저가 로컬 캐시로 사용할 경우 문제가 발생할 수 있습니다.
2. 브라우저에서 /image.png라는 리소스가 img 태그에 포함되어 있고 사용자 클릭 액션을 통해 fetch나 XMLHttpRequest등을 사용해 해당 리소스에 접근하여 다운로드나 응답 헤더값등을 사용한다고 가정해볼 때, 만약 브라우저의 로컬 캐시가 활성화되어있다면, img 태그에서 사용한 요청 응답인 CORS 헤더가 없는 캐시를 재사용하게 되고 CORS 오류가 발생할 수 있다.
   3.그래서 개발자 도구에서 캐시를 사용 안하고 요청을 보내보니 CORS 에러가 안 나면서 잘 작동하였다.

해결 수단

요청에 Cache-Control: no-store를 설정을 해주면 브라우저는 로컬 캐시를 사용하지 않게 되어서 CORS 오류가 더이상 발생하지 않았다.