[S3] AWS S3 fetch시 cors문제 해결

텍스트 에디터를 달아 글 작성을 완료할 때 반환받은 HTML을 파일로 만들어 S3로 업로드했다.

DB에는 당연히 S3에 업로드 후 반환받은 url을 집어넣는다.

 

그리고 해당 글을 불러올 때 해당 url로 fetch 요청을 날리면 CORS 에러가 발생한다.

여태껏 이미지를 저장할 용도로 S3를 많이 사용했으니 fetch 요청 시에 CORS 에러가 발생한다는 건 처음 알았다.

이미지는 src 프로퍼티에 적어주기만 하면 되니까 말이다.

 

해당 코드에서 CORS 에러가 발생한다.

axios.get(`${res?.html_url}`).then((data) => setHtml(data.data));

 

여러 블로그를 참고하여 문제를 해결했는데, 방법은 크게 복잡하지 않았다.

먼저 S3 -> 버킷 -> 권한에 들어가서 제일 아래에 가보면 CORS 규칙이 있다.

권한 탭

편집을 누르고, 허용할 Origin, Header, Methods 들을 적어준다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ]
    }
]

 

CORS 에러를 한 번이라도 해결해보신 분들은 해당 내용이 무얼 뜻하는지 알고 계실 테니 넘어가겠다.

S3 서버에서 access-control-allow-origin 헤더를 클라이언트 측으로 보내줘야 CORS 에러가 뜨지 않는데

S3 서버로 요청 시 Origin헤더를 보내야 응답 시에 access-control-allow-origin 헤더를 준다.

 

즉, 

 

1. 클라이언트에서 Request Header에 Origin 헤더를 실어 보냄

2. S3 서버는 Response 시 Origin 헤더가 있으면 access-controll-allow-origin 헤더를 내려줌

3. access-controll-allow_origin 헤더가 오면 CORS 에러가 발생하지 않음

 

인데, 클라이언트 측에서 S3 서버로 요청을 보낼 때 Origin 헤더를 보내지도 않을뿐더러

Origin 헤더는 임의로 수정할 수 없는 Forbidden Header Name이므로, 강제로 실어 보낼 수 없다!

 

https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

AWS에서 제공해주는 cdn서비스인 CloudFront를 이용해 이 문제를 해결할 수 있다.

CloudFront 사용법은 너무 많이 나와 있으니 다음에 자세히 기술하도록 하겠다.

가장 중요한 것은 원본 요청 정책을 CORS-S3Origin 으로 설정하는 것인데,

 

CORS-S3Origin

 

해당 정책을 자세히 보면 (정책 보기 클릭)

 

 

origin 헤더를 포함한다고 나와 있다.

이제 클라이언트는 CloudFront url로 요청을 날리면 CloudFront가 origin 헤더를 실어 S3 서버로 요청을 보낼 것이다.

그렇게 되면 CORS 에러를 피할 수 있다.

 

참고 https://velog.io/@kimsehwan96/S3-CORS-%ED%97%A4%EB%8D%94-%EA%B4%80%EB%A0%A8-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-html2canvas-lottie

S3 CORS 헤더 관련 이슈 해결방법 (html2canvas, lottie)