최근에 CPU 사용률 문제가 발생하면서 보안 플러그인을 강화하고 CDN을 적용했는데, 갑자기 폰트와 아이콘이 깨지는 현상이 발생했습니다. 개발자 도구를 확인해보니 원인은 바로 OpenLiteSpeed CORS 오류였습니다.
처음에 해결하기 위해서 CDN 설정에 오류가 발생한 파일 유형을 추가했는데 해결이 되지 않았습니다. 그 다음은 .htaccess에 설정을 추가해서 해결을 하려고 했지만 OpenLiteSpeed 환경에서는 해당 방법들이 적용되지 않았습니다.
결국 WebAdmin(7080)에서 직접 설정해야 해결된다는 점을 알게 되었고, 설정을 추가한 이후로 지금은 정상적으로 작동하고 있습니다. 저와 같은 문제가 있는 분들을 위해서 CORS 오류 해결하는 방법을 아래에 정리하겠습니다.
목차
CORS란 무엇인가?
CORS(Cross-Origin Resource Sharing)는 브라우저가 다른 출처(도메인, 포트, 프로토콜)에서 리소스를 요청할 때 이를 허용할지 결정하는 보안 정책입니다. 외부 도메인에서 리소스를 가져올 때 해당 부분을 허용하지 않으면, 브라우저에서 해당 요청을 차단합니다.
예를 들어,
- 원본: https://example.com
- CDN: https://cdn.example.com
이처럼 출처가 다르면 브라우저는 보안을 위해 요청을 차단합니다. 이때 서버에서 Access-Control-Allow-Origin 헤더를 보내줘야 브라우저가 요청을 허용합니다.
※ CORS에 대한 자세한 기술적 설명은 MDN 공식 문서를 참고하시면 도움이 됩니다.
브라우저에서 CORS 오류 증상 확인
Access to XMLHttpRequest at ‘https://example.com’ from origin ‘https://another-site.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present아이콘과 폰트가 깨질 경우, 브라우저 개발자 도구(Console 탭)를 확인을 해보게 되면 위와 같은 오류 메세지가 발생하는 것을 확인할 수 있을 것입니다.
✅ 대표적인 증상
- woff, woff2 폰트 로딩 실패
- svg, ico 아이콘 표시 오류
- CDN 적용 후 리소스 차단
- API 요청 실패
- 일부 JS 또는 CSS 적용 불가
특히 워드프레스에서 LiteSpeed Cache + CDN을 함께 사용할 경우 자주 발생합니다.
.htaccess가 작동하지 않는 이유
Apache 환경에서는 .htaccess에 아래와 같은 코드를 추가하면 해결되는 경우가 많습니다.
Header set Access-Control-Allow-Origin "*"하지만 OpenLiteSpeed는 Apache와 구조가 다릅니다. .htaccess가 완전히 동일하게 동작하지 않기 때문에, WebAdmin에서 직접 Header를 설정해야 합니다.
WebAdmin 설정으로 CORS 오류 해결 방법
1️⃣ WebAdmin 접속
WebAdmin(https://도메인 또는 IP:7080) 도구로 접속한 후에 왼쪽 메뉴에서 Virtual Hosts → 운영 중인 도메인 선택하시면 됩니다.
2️⃣ Context 메뉴로 이동
Virtual Hosts 설정으로 들어가게 되면 상단에 탭들이 있는데 여기서 Context로 들어간 후에 오른쪽에 있는 + 버튼을 클릭하시면 됩니다.
3️⃣ New Context 생성
New Context에서 Type(타입)을 Static 그대로 둔 후에, 오른쪽에 있는 ▶ 버튼을 눌러서 다음 설정을 진행하시면 됩니다.
4️⃣ Static Context Definition 입력
- URI*: /wp-content/
- Accessible*: Yes
위의 설정을 한 후에 Header Operations 공간에 아래의 코드를 입력하시면 됩니다.
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Authorization설정을 완료했다면 오른쪽 상단에 있는 디스켓 모양을 눌러서 Save 한 후에 왼쪽 상단에 서버 재시작을 하면 됩니다.
왜 /wp-content/에 설정하는가?
워드프레스의 폰트, 아이콘, 이미지, JS, CSS 파일 대부분이 /wp-content/ 폴더 안에 위치하기 때문입니다. 이 경로에 CORS 허용 헤더를 추가하면 해당 폴더 내 모든 리소스에 적용됩니다.
설정 후 반드시 해야 할 작업
- OpenLiteSpeed 서버 재시작
- CDN 캐시 초기화
- LiteSpeed Cache 비우기
- 브라우저 캐시 삭제
이 과정을 거치지 않으면 변경 사항이 반영되지 않을 수 있습니다.
자주 묻는 질문(FAQ)
Q1. CDN을 적용하면 자동으로 CORS가 해결되지 않나요?
아닙니다. CDN은 리소스를 전달해줄 뿐, 서버가 CORS 헤더를 보내지 않으면 브라우저는 여전히 차단합니다.
Q2. .htaccess에 추가했는데 왜 적용되지 않나요?
OpenLiteSpeed는 Apache와 내부 구조가 다릅니다. 따라서 WebAdmin에서 Header Operations를 직접 설정해야 합니다.
Q3. wp-content 전체에 적용해도 괜찮나요?
정적 리소스(이미지, 폰트, CSS, JS)라면 문제 없습니다. API 인증 관련 파일은 별도 관리가 필요합니다.
Q4. 서버 재시작을 꼭 해야 하나요?
네. Header 설정은 서버 재시작 후 적용됩니다.
마무리
OpenLiteSpeed에서 CDN을 적용한 뒤 폰트나 아니콘이 깨진다면 대부분은 CORS 헤더가 누락된 문제입니다.
- .htaccess로 해결되지 않는다.
- WebAdmin → Virtual Hosts → Context → Static 설정 필요
- Header Operations에 Access-Control-Allow-* 추가
- 서버 재시작 + 캐시 초기화 필수
CORS 오류는 방문자에게 직접적인 영향을 주기 때문에 제대로 된 사이트를 표시하기 위해서 오류를 발견한다면 바로 수정을 하는 것이 좋습니다. 위의 설명을 보시고 WebAdmin 도구에서 설정을 통해 해결을 하시기 바랍니다.
▶ 애널리틱스 GA4 내부 트래픽 제외 방법 – 필터 설정까지 한 번에
