💻 로컬에서 HTTPS 설정하기: CORS 문제 해결을 위한 mkcert 기반 개발 환경 구축

mkcert - git

 

🌱 왜 HTTPS 설정을 하게 되었나?

Access to fetch at 'https://api.my-backend.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

프로젝트를 진행하면서 어느 날 갑자기 API 요청이 CORS 에러로 막히는 상황이 발생했다.
그 전까지는 문제없이 API를 호출했는데, 갑자기 다음과 같은 에러가 뜨기 시작했다.

 

백엔드 담당자에게 문의한 결과,

보안 상의 이유로 백엔드 서버에서 HTTPS로 들어오는 요청만 허용하도록 정책을 변경했다고 한다.
즉, 프론트엔드 로컬 개발 환경에서도 HTTPS로 접근해야 백엔드와 통신할 수 있다는 의미였다.

 

이를 해결하기 위해, 로컬 개발 서버를 HTTPS로 띄우는 환경 설정 작업을 하게 되었다.

 

 

⚙️ mkcert를 이용한 HTTPS 개발 환경 구축 과정

 

* mkcert 란?

mkcert는 로컬 개발 환경에서 HTTPS를 간단하게 구성할 수 있도록 도와주는 도구이다.

이미 다른 프로젝트에서 사용하고 있었어서 mkcert를 사용했다.

 

1. 설치

brew install mkcert      # macOS
choco install mkcert     # Windows

 

우선 mkcert를 설치해준다.

 

mkcert -install

 

그 후 https를 적용할 프로젝트 최상위 디렉토리에서 위 명령어를 입력해준다.

루트 인증서를 설치하는 명령어 이다.

 

 

2. 인증서 발급

mkcert -key-file ./.cert/cert.key -cert-file ./.cert/cert.cert "localhost" 127.0.0.1

 

그 후 위 명령어를 통해 인증서를 발급해준다.

가운데에는 로컬 테스트용 도메인을 입력하면 되고, 그 다음엔 IP 주소를 입력해주면 된다.

 

위 명령어를 실행하면, key.pem .pem 파일이 생성될 것이다. 

해당 파일들을 .cert 폴더를 생성에 옮겨준다.

 

 

 

3. 개발 서버에 인증서 적용

/// package.json

"script": {
	"start" : "HTTPS=true SSL_CRT_FILE=./.cert/cert.crt SSL_KEY_FILE=./.cert/cert.key..."
}

 

개발 서버에서 인증서를 적용하는 방법은 여러 가지가 있다.

vite.config.ts 파일에 설정을 해도 되지만, 좀 더 쉬운 방법으로 적용했다. 

 

HTTPS = true : HTTPS 서버로 실행하도록 설정

SSL_CRT_FILE, SSL_KEY_FILE : 인증서 경로 지정

 

 

 

4. Error

 

혹시 권한 관련 에러가 발생하면 아래 명령어를 입력해보자.

// 실행권한 부여
chmod +x mkcert

// 격리 속성 제거
xattr -d com.apple.quarantine mkcert