AWS 배포 중 이미지, 비디오 리소스를 받아오지 못하는 경우

개발환경에서 컴퓨터를 이용한 서버에서는 crossorigin 미들웨어를 사용했다.

app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

그러나 AWS로 배포해보니 이미지 소스나 영상 소스를 가져오지 못하고 

ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

혹은

AccessControlListNotSupported: The bucket does not allow ACLs

등 다양하게 ACL, crossorigin과 관련된 에러를 뱉어낸다.

에러에서도 알 수 있듯이 Crossorigin이 문제였던듯하다.

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.

 

원인을 알았으니 해결해보려면 AWS버킷에 ACL권한을 변경해주면 된다.

권한 -> 객체 소유권 편집 -> ACL 비활성화됨(권장)을 ACL 활성화됨로 변경 ->
ACL이 복원된다는 것을 확인합니다. 체크 -> 버킷 소유자 선호 체크 -> 변경사항 저장
위의 방법까지 해보시고, 그래도 안 되시는 분들은 ACL(액세스 제어 목록)에서 편집->모든 사람(퍼블릭 액세스)에 나열, 읽기 체크해주신 후 변경사항 저장

 

 

No 'Access-Control-Allow-Origin' header is present on the requested resource. net::ERR_FAILED 200

위와 같은 오류가 콘솔창에 뜨면 권한 -> CORS(Cross-origin 리소스 공유) 편집 -> 아래 코드를 추가해주시고 변경사항 저장하시면 된다.
https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]

+ 추가적으로 이미지 태그와 비디오 태그에 crossorigin속성을 추가한다.
img(src=`이미지 주소` crossorigin)
video(src=`비디오 주소` crossorigin)

CORS 구성
https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/ManageCorsUsing.html

AllowedOrigins을 설정하는 이유
허용하지 않은 origin에서 리소스에 접근 및 사용을 막기 위해서이다.
다시 말해, 허용하지 않은 클라이언트에게 리소스를 주지 않기 위함이고, 허용할 대상에 대한 설정이 AllowedOrigins이다.

 

출처) 노마드코더 sugar님, yoon1139님.