이미지 가져올때 CORS 오류가 발생한다....!!!!! [AWS S3+CDN]

이미지를 가져오고 싶은데 cros 오류가 발생한다...

cors는 통신때만 해주면 되는데 왜 여기서 까지 발생할까...

 

이유를 검색해보니 초기 이미지를 캐싱하는 단계에서는 cors 헤더를 가져가지 않고 캐싱을 하기때문에 이와같은 오류가 발생한다고 한다 

그래서 열심시 구글링해서  canvas로  우회해서 가져오고 crossOrigin을 설정해주었지만... 그래도 동일하게 발생하는 오류...

 

여기서 삽질을 더 한결과

 

기존 코드

getBase64FromUrl(){
    let image = new Image();
    const _this = this;
    image.onload = function() {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);

        let dataURL = canvas.toDataURL();
        _this.imageUrl = dataURL;
    }

    image.crossOrigin = "Anonymous";
    image.width = this.art.image_width
    image.height = this.art.image_height;
    image.src = `${this.art.image_src.o}`;
}

 

변경된 코드

getBase64FromUrl(){
    let image = new Image();
    const _this = this;
    image.onload = function() {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);

        let dataURL = canvas.toDataURL();
        _this.imageUrl = dataURL;
        console.dir(dataURL)
    }

    image.crossOrigin = "Anonymous";
    image.width = this.art.image_width
    image.height = this.art.image_height;
    image.src = `${this.art.image_src.o}?not-from-cache-please`;
}

 

해결방안 설명

방안은

이미지 src를 지정할때 get방식의 매개변수를 추가하는것!

매개변수를 추가하면 초기 캐싱한 url 과 달라 이미지 캐싱할때 한번더 가져온다고 한다

 

그래서 이제 cors 오류 없이 클린하게 이미지를 가져와서 갖고 놀 수 있게 되었다

 

 

---

 

여기서 잠깐!

혹시 aws cdn 을 사용하고 있는데 cors 설정이 되어있지 않으면 이것도 같이 세팅하고 넘어가자

 

 

CDN

1. CDN 동작에서 편집으로 이동

2. 캐싱 키 및 원본요청 수정

 

캐싱정책은 정책생성으로 추가해주자

원본 요청 정책은 CORS-S3Origin 으로 설정하고

 

 

3. 캐싱정책 추가

이름은 편한걸로 설정하면되구, 헤더에 Origin을 추가하고 완료 버튼 눌러서 캐시 키 및 원본요청페이지 >  캐시 정책 오른쪽 새로고침 후 새로 만든 정책으로 설정해주면 CDN은 설정끗!

 

---

S3

1. 버킷 권한설정 CORS (Cross-origin 리소스 공유) 설정

 

버킷 권한설정 아래에 있는 Cors 영역을 아래와 같이 수정해주자

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "Access-Control-Allow-Origin"
        ],
        "MaxAgeSeconds": 3000
    }
]

 

 

마치는글

 

이제 프론트에서 이미지 캐싱도 문제없이 가져오고, aws에서도 Origin 이슈없이 전달줄테니 이미지 관련 CORS 문제는 이제 없는거다