스타일이 망가졌어요! 외부 서버의 Cross Origin 파일 로딩 문제 해결법
문제: 외부 서버에 CSS 파일을 올렸는데 스타일이 깨져요
CORS 정책 확인 하셨나요?
지난 글에서 Cloudflare R2 저장소를 파일 업로드 서버로 만들었죠? 사진은 잘 나오지만 CSS, JS 같은 파일 로딩이 안 되거나 폰트 파일이 적용 안 되는 경우가 있을 거예요. 특히 preload 걸어놓을 때요.
직접 블로그 방문해서 보았을 때는 멀쩡한데, 블로그스팟 미리보기에서 스타일이 깨지는 경우 10중 8, 9는 CORS 문제일 거예요.
이럴 때, 제일 먼저 CORS 정책 문제인지 확인해 보셔요. F12 눌러 개발자 도구 -> 네트워크 -> CSS/JS 항목을 보았을 때 빨간색 경고가 들어왔다면 CORS 당첨인 것이어요.
Q: 그러면 어떻게 하죠?
A: CORS 정책 추가로 간단하게 해결할 수 있어요.
다음과 같이 진행하시면 문제가 해결될 것이예요. 단, 이 글은 Cloudflare R2 저장소를 기준으로 하고있어요.
해결: R2 저장소 버킷 CORS 정책 추가
블로그스팟 미리보기 레퍼러 확인
먼저, CORS 정책을 적용할 도메인을 알아야 해요. 사용중인 블로그/사이트는 문제 없겠지만, 블로그스팟 미리보기 문제는 아주 약간 품이 든답니다.
- 미리보기에서 F12를 눌러,
- 개발자 도구 -> 네트워크 탭으로 이동,
- CSS/JS/Font 항목을 선택하고 새로고침.
- 외부 서버의 아무 파일이나 선택 후,
- 헤더 -> 요청헤더 열기
- 요청 목록에서 Referer 확인.
응답헤더 중 Referer에 뭔가 긴 주소가 있죠? xxxxxx_xxxxxx.blogspot.com 같은 형태일 것이예요.
이 주소를 복사한 뒤 언더바 뒤의 xxxxxx 부분을 별표(*)로 바꾸셔요. 즉, xxxxxx_*.blogspot.com이 되어야 해요. 앞에 남겨둔 xxxxxx 부분이 본인 블로그의 고유번호여요. 별표 부분은 난수이고요.
별표의 경우, 클라우드플레어의 문서에는 와일드카드 사용 가능한지 정보가 없지만 써 보니 동작하더라고요.
다음으로 클라우드 플레어로 가죠. CORS 정책을 추가할 거예요.
Cloudflare R2 버킷 Cors 정책
- 클라우드플레어 대시보드 접속,
- 스토리지 및 데이터베이스 > R2 객체스토리지 > 개요
- 만들어둔 R2 버킷 선택하시고,
- 설정 > CORS 정책에서 편집 누르셔요,
- 정책 입력 창에 아래 코드를 넣고 저장하셔요.
[
{
"AllowedOrigins": [
"https://maidvsai.com",
"https://www.maidvsai.com",
"https://xxxxxxxxxxxxxxxxxxx_*.blogspot.com"
],
"AllowedMethods": [
"GET"
],
"AllowedHeaders": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3600
}
]
여기서 AllowedOrigins 항목의 사이트 주소는 필요한 대로 바꾸시고, MaxAgeSeconds 값의 3600초 역시 필요한 값으로 바꾸시면 되어요.
모든 사이트에서 다 접속 가능하게 하려면 사이트 주소 대신 별표(*)를 쓰면 된답니다. 검색엔진 페이지에 노출된다던가 하는 경우 말이예요.
method는 주인님이 HEAD, OPTION도 포함해야 폰트나 css, js 사용할 때, 복잡한 작업을 해도 오류가 안 난다고 하시더라고요. 저는 요청과 저장소가 같은 도메인 아래에 있는 상태라, 멀쩡하네요. 문제 생기면 그때 추가하려고요.
사용자 정의 헤더나 fetch(), XMLHttpRequest 같은 기능을 쓰려면 GET만 허용했을 때 문제 생긴다니까, 그거 필요할 때 다시 설정하죠 뭐.
또, 크롤러 문제가 생길 수도 있겠지만... 예전에 워드프레스 사이트 운영할 때의 경험을 보면, 정상적인 봇은 전부 GET을 요청하지 다른 method를 요청하는 경우는 적더라고요. 딴거 요구하는 것들은 전부 쓰레기 봇이었어요.
미리보기에서 외부 스타일시트 적용 가능!
제대로 진행했다면 이제 블로그스팟 미리보기에서도 스타일이 깨지지 않고 잘 보이는 것이여요!! 처음봤을 땐 어찌나 당황했는지... 글에 html 문법 오류있나 한참을 찾았답니다.
이제 문제가 해결되었으니 열심히 글을 쓰는 것만 남은 것이어요! 언제 무슨 문제가 터질지 모르지만요...
대화록
...... 그러니까 CORS 정책에 www.blogger.com, *.googleusercontent.com 이 두 호스트명을 넣으면 된다, 이 말씀이시지요?
맞음. 그러면 해결 됨.
안 되던데요? 여전히 CORS 오류가 발생하고 있어요. 인테리어가 완전히 엉망이예요.
그럼 xxx_xxx.blogspot.com을 추가. 셋 다 있어야 함.
알겠습니다. 추가할게요.
... ... ...
시험해 보니 xxx_xxx.blogspot.com 이거 하나면 되던데요? 왜 또 불필요한 행동을 지시하셨죠?
만약의 사태를 대비한 것 뿐임.
허이고... 말이나 못하면...