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

웹/프론트엔드

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

이민훈 2022. 9. 20. 23:57

텍스트 에디터를 달아 글 작성을 완료할 때 반환받은 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

A forbidden header name is the name of any HTTP header that cannot be modified programmatically; specifically, an HTTP request header name (in contrast with a Forbidden response header name).

developer.mozilla.org

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

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

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