CORS 문제로 작동하지 않은 hugo 검색 기능

문제 상황

#

갑자기 이 사이트의 검색 기능이 작동하지 않는 것을 발견했는데 이상하게 다른 컴퓨터에서 열어봤을 때는 검색 기능이 작동했다. 대충 검색하다 개발자 도구를 열어봤더니 CORS 정책 때문에 index.json을 열 수 없다는 내용이였다.

(www.를 붙인 것과 붙이지 않은 것이 뒤섞인 것만 보고 URL관련 설정에 www.붙인게 없는지 열심히 뒤졌는데 콘솔 로그와 주소창을 다시 보니 www.를 자동으로 생략했기 때문에 제대로 보지 못한 것이였다.)

CORS

#

교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 자신의 출처가 아닌 다른 출처의 자원을 로딩하는 것을 의미한다. 잠재적인 보안 문제를 예방하기 위한 정책으로 브라우저는 CORS를 막은 것이다.

여기서 같은 출처의 기준은 프로토콜, 도메인, 포트가 모두 동일해야 한다. 내 경우는 도메인이 달랐기 때문에 발생했는데 www.page.hw5e.cc 에서든 page.hw5e.cc 에서든 검색 기능을 담당하는 자바스크립트 코드는 page.hw5e.cc/index.json을 가져와서 검색을 하기 때문에 www가 붙은 쪽에서는 CORS문제로 index.json을 가져오지 못해 문제가 발생했다.

사이트의 검색 기능 부분에 문제가 아닌 브라우저의 보안 정책 때문에 검색이 작동하지 않은 것이다.

해결책

#

nginx 설정 파일의 server 블록 안에 다음 내용을 추가했다.

add_header 'Access-Control-Allow-Origin' 'https://www.page.hw5e.cc' always;

참고한 글

#

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin?utm_source=devtools&utm_medium=firefox-cors-errors&utm_campaign=default
https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F
https://velog.io/@jh100m1/CORS-에러가-뭔데-어떻게-해결하는건데 https://fetch.spec.whatwg.org/#http-cors-protocol

사실 www.서브도메인을 굳이 유지해야 하나 싶기도 하다.