어떤 사용자가 사이트에서 코드 하이라이팅이 작동하지 않는다고 불평했습니다. 제 사이트에서도 해당 문제를 재현해 보았습니다. 문제의 원인은 CDN이 CORS 정책으로 차단되고 있는 것 같습니다:
cors 페이지의 “cors 헤더 추가” 설정에 js를 추가하여 문제를 해결했습니다:
이 기능이 활성화되면 bunny.net는 목록에 있는 확장자를 가진 파일에 대한 모든 요청에 CORS 헤더(Cross-Origin Resource Sharing)를 자동으로 추가합니다.
이 게시글은 다른 사람이 bunny.net CDN과 관련해서 문제를 겪는 경우를 대비하여 이를 문서화하고, 제가 이 문제를 정확히 이해하고 있는지 확인하기 위해 작성되었습니다.
bunny에 CORS에 js를 추가하는 설정이 있거나(혹은 과거에 있었다)는 생각이 듭니다. (아무 이유 없이) bunny.net 리소스에 대해 CORS에 js가 추가되어 있는데, 제가 직접 추가한 기억이 없습니다. 비교적 새로운 사이트인가요?
처음 발견한 사이트는 꽤 오래된 사이트입니다(언제부터 bunny를 사용하기 시작했는지 기억나지 않습니다).
bunny 쪽에서 변경 사항이 있었는지, 아니면 포함된 스크립트에 문제가 있었는지 확실하지 않습니다.
이 문제를 눈에 띄게 만든 변경 사항은 아마도 https://github.com/discourse/discourse/commit/0878dde2132a34ba2787e702de222bc6dd161895일 것입니다. 이 커밋은 highlightjs를 네이티브 import()를 통해 로드하도록 변경했는데, 이는 CDN에서 가져올 때 CORS 헤더를 요구합니다.
하지만 그 변경 사항 이전에도 커스텀 폰트와 같은 요소(이것도 크로스 오리진 요청에 대해 CORS 헤더가 필요함)로 인해 일부 문제가 발생했을 가능성이 높습니다.
이론적으로 Discourse 자체는 CDN 응답에 CORS 헤더를 추가해야 합니다. 그렇지 않다면, 아마도 CDN이 Host 헤더나 X-Forwarded-Host 헤더에 CDN 호스트명(즉, 포럼 호스트명이 아닌)을 설정하지 않고 있다는 뜻일 것입니다.
그렇더라도 CDN 설정을 통해 헤더를 추가하는 것은 아마도 동일한 효과를 거둘 것입니다 
