미니프로젝트를 진행하는 중 처음 보는 에러가 발생했습니다. 개발서버에서 볼때는 아무런 문제가 없었는데 배포 미리보기를 확인하니 Mixed Content라는 오류가 발생했습니다.
Mixed Content ?
mixed content 는 동일한 페이지에서 https, http 리소스가 함께 로드되면 http를 사용하여 요청한 리소스가 https 로드된 페이지 전체를 안전하지 않게 만들 수 있기 때문에 브라우저 자체에서 요청을 막는 거라고 합니다.
백엔드분들이 구축해주신 서버가 http를 사용하다보니 저희가 개발서버에서는 문제없이 서버에서 가져온 리소스들을 확인할 수 있었지만 배포된 사이트에서는 mixed content 에러를 발생시키게 되더라구요...😭
try
- 콘텐츠 보안
- 프록시 서버
위 두가지는 제가 이슈를 검색해서 해결방법으로 찾을 수 있었던 키워드 두가지 인데요.. api요청 url을 http:// -> // 로 변경하거나, html 파일 head에 content-security-policy meta태그를 추가하여 콘텐츠 보안설정을 변경하는 등 시도를 해봤는데 모두 해결되지 않았습니다. 또, vite를 사용중이라 vite 설정 파일에서 프록시서버를 설정해보라는 글도 보고 따라해봤는데,, 두 가지 모두 해결되지 않았습니다.
catch
결국 문제는 제가 해결하진 못하고 백엔드 분들께서 https로 서버를 재배포해주셔서 mixed content 문제는 일단락 되었습니다.
느낀점
우선 문제가 일단락 되긴했고 https가 보안상 더 우수하기 때문에 서버를 https로 변경하는게 궁극적인 해결책이라고 하더라도 이번 이슈를 앞단에서 해결해보고자 시도했던 과정에서 선배 개발자님들의 블로그를 보면서 제 코드에 적용해보면서도 이게 맞는건지 정확히 어떤 의미로 넣은 코드인지 이해하지 못하니 '내 코드에선 왜 해결안되는걸까? 어떤 부분이 다른걸까?' 하는 의문점이 생겼고 의문점을 해결하지 못한것은 보안이나 네트워크에 대한 지식과 이해도가 아직 많이 부족함을 다시 한번 느낄 수 있었습니다.
http/https, CORS, mixed contents 등 들어보긴 했으나 정확히는 모르는 이 파편화된 지식들을 프로젝트 발표와 회고공유회 이후 다시한번 짚어봐야겠다고 생각했습니다 🤯
