웹사이트를 제작하는데 문제가 발생했다.

카페 24에서 서버와 example.com 이라는 도메인을 구매해서 사이트를 제작했는데 친구에게 사이트가 제대로 동작하지 않는다는 피드백을 받았다.

문제가 무엇인지 확인하기 위해서 웹페이지에 접속했는데 내 컴퓨터에서는 아무리 해도 에러를 재현할 수가 없었다.

# 원인

나중에 알아보니 친구는 www.example.com으로 접속했고 나는 example.com으로 접속하고 있었다.

이 때문에 backend에서는 도메인에 차이가 있다고 판단하고 cors에러를 발생 시켰던 것이었다.

난 http://www.example.com 을 구매한 적이 없는데!

두 개는 분명 다른 도메인이지만 카페24에서 http://example.com 도메인을 구매했다면 www.example.com으로도 접속이 가능하다. 도메인 연결 시 www 서브 도메인이 자동으로 설정되기 때문이다

💡 www 서브 도메인은 카페24 내에서 삭제할 수 있다!

해결

두 가지 방법으로 해결할 수 있는데 하나는 nginx를 활용하는 것이고 하나는 backend 서버에서 cors에 www.example.com을 추가하는 방법이 있다.

nginx활용

해당 프로젝트에서는 nginx를 reverse-proxy로 활용해서 frontend와 backend를 라우팅 했다.

만일 www.example.com으로 접속을 시도한다면 example.com으로 리디렉션하는 코드를 추가해 주었다.

/etc/nginx/conf.d/default.conf

# www가 붙었는지 확인하는 함
map $http_host $no_www {
    default        0;
    "~^www\.(?<domain>.+)$"    $domain;
}

server {
    listen 80;
    server_name www.example.com;
    return 301 https://example.com$request_uri;
}

server {
        listen 443 ssl;
        server_name www.example.com example.com ;

				# www가 붙어있다면 www를 제거한 상태로 다시 접속시키기
        if ($http_host ~* ^www\.) {
        return 301 https://example.com$request_uri;
        }

				#... 나머지 코드
}

backend 설정

backend 를 django로 만들었다.

CORS_ALLOWED_ORIGINS 에 cors를 허용할 사이트를 추가해 주었다.

CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://www.example.com",
]

# 결론

---

카페24에서 도메인을 구매할 때 www. 서브 도메인이 자동으로 생성 되는 것을 이번에 처음 알게 됐다. 그리고 분명히 주소를 알려주어도 www.을 붙여서 접속하는 이용자가 생길 수 있다는 것도 이번에 깨달았다. cors에러는 끝이 없다..