TYDev BLOG
TYDev BLOG/
로컬호스트 http to https 매핑하기
카테고리
로컬호스트 http to https 매핑하기
로컬호스트 http to https 매핑하기

로컬호스트 http to https 매핑하기

작성자
이태용이태용
카테고리
ETC
태그
network
troubleshooting
notion image
🔴
보안 때문에 백엔드에서 httpOnly을 설정함으로써 기본 프로토콜 localhost 개발 서버에서 SOP 이슈가 나타났다.
 

해결 방안

  1. 백엔드에 개발환경에서 httpOnly 설정 해제 요청
  1. 로컬호스트에서 https로 개발 서버 열기 ✅
 

Caddy로 해결

Caddy는 https를 쉽게 만들어주는 프록시다. Caddy를 리버스 프록시로 띄운다.
$ brew install caddy
 
caddy reverse-proxy --from A --to B
💡
caddy를 A 포트로 띄우고, 모든 트래픽을 B 포트로 매핑 시도
 
나는 개발 서버 실행 시에 자동으로 브라우저가 포트 번호로 오픈되기를 원하기 때문에 추가적으로 커스텀 한 상태이다.
"scripts": {
    "dev": "env-cmd -f .env.local yarn run open-browser && next dev",
    "dev-pass": "env-cmd -f .env.local yarn run open-browser-ssl && caddy reverse-proxy --from localhost:3000 --to localhost:3001",
		"dev-ssl": "PORT=3001 && env-cmd -f .env.local yarn && next dev",
    "open-browser": "open http://localhost:3000/",
    "open-browser-ssl": "open https://localhost:3000/",
  },
package.json
 

실행 과정

  1. yarn dev-pass 로 caddy를 3001 포트로 띄우고, 모든 트래픽을 3000포트로 매핑해준다.
  1. yarn dev-ssl 로 3000포트로 개발 서버 실행시킨다.
 

댓글

guest