Next.js - Mixed content 문제 해결하기

1. 문제 발생

development 환경에서 작업을 완료 후 vercel을 활용해 production 환경으로 배포 후
API 통신 동작을 체크했을 때, https통신이 중간에서 http로 변경되어져

요청이 들어가는 문제를 경험했습니다.

---

2. 해결하기 위한  시도

Api 엔드 포인트를 변경하거나, 백엔드에 변경 사항이 있는지 질문도 해보고
vercel 환경 변수도 재설정해줬지만 계속 http로 요청이 이뤄졌는데요.

---

3. 해결 방법

next.js의 src > app > layout.tsx에 meta tag를 설정해주는 것으로 해결할 수 있었습니다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 

위의 meta tag를 적용하면 http 콘텐츠를 자동으로 https로 변환이 이뤄집니다.