2021.04.19 갤러리 페이지에서 Mixed content 오류 해결, 1차 개발 완료

2021.04.18 AWS S3로 이미지 서버 구축, Heroku로 배포해보기

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지 2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기 2021.04.13 - [개발 일지/한라열쇠..

brightnightsky77.tistory.com

heroku로 배포까지 했는데 이상한 문제가 생겼었습니다.

갤러리 페이지에서 사진을 클릭하면 nivo-lightbox가 작동하지 않았습니다.

개발자 도구로 확인해보니 밑과 같은 오류가 떴습니다.

개발자 도구에서 처음에 뜨는 오류인 Mixed Content에 관해서 검색해보니

stackoverflow에서도 위와 같은 문제를 겪고 질문을 올린 사람이 있었습니다.

Blocked loading mixed active content

I am getting these warnings in my console and my script is not working fine Blocked loading mixed active content "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" Here is the

stackoverflow.com

글을 읽어보니 Mixed content 오류가 HTTP와 HTTPS의 차이점에 의해 발생하는 문제라고 하는데

관련 지식을 좀 더 쌓고 관련 포스팅을 올려보겠습니다.

일단은 발생한 문제부터 해결했습니다.

stackoverflow에서 말하는 Mixed Content 오류 해결법은

CDN으로 가져온 라이브러리들의 코드에서 http로 되어있는 주소들을 https로 바꾸면 된다는 것이었습니다.

제 코드를 보니 jquery CDN이 http로 되어 있었습니다.

밑의 코드에서 두 번째 줄 코드입니다.

<!-- nivo Ligitbox 플러그인 적용 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{% static 'nivo-lightbox.js' %}"></script>

밑의 코드는 두 번째 줄에서 http를 https로 바꾼 코드입니다.

그냥 nivo-lightbox를 적용하는데 아무런 문제가 없었는데

배포하고 나서 갑자기 이런 오류가 발생하니까 엄청 당황했었는데

정말 간단하게 해결될 수 있는 문제여서 다행이었습니다.

<!-- nivo Ligitbox 플러그인 적용 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{% static 'nivo-lightbox.js' %}"></script>

잘 작동하는 nivo-lightbox와 개발자 도구에서도 뜨지 않는 오류

이로써, 현재 한라열쇠 홈페이지에 대한 전체적인 틀을 갖추고 heroku로 배포까지 끝냈습니다.

관련 사진이나 동영상은 모자라지만, 부모님과 함께 만들고 붙이기만 하면 되므로

사진과 동영상 자료가 만들어지면 새로 업데이트했다는 소식은 후에 포스팅하겠습니다.

회원가입이나 로그인 기능도 없는 너무 간단한 기능의 홈페이지인데 시간도 많이 걸렸습니다.

홈페이지와 관련된 새로운 아이디어를 떠올려 지속가능한 개발이 됐으면 좋겠는데

아직은 마땅한게 없습니다......

얼른 머리를 굴려 또 새로운 기능을 개발했다고 하는 포스팅을 올릴 수 있으면 합니다.

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

2021.05.06 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.05.06 열쇠 관련 뉴스 페이지 만들기

2021.05.06 열쇠 관련 뉴스 페이지 만들기

brightnightsky77.tistory.com

저작자표시 비영리 변경금지

2021.04.19 갤러리 페이지에서 Mixed content 오류 해결, 1차 개발 완료

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

댓글

티스토리툴바