처음에 github에 올려놓고 다음글대로 따라가며 시작했는데 다음과 같이 오류가 떠버려서 당황했다 🤷♀️🤦♂️
⛔ Error1
다음과 같은 오류가나는 것은
This website is hosted by PythonAnywhere, an online hosting environment. Something went wrong while trying to load it; please try again later.
- 내가 pythonanywhere에서 어딘가 오타가났거나
- 깃허브에 설정해둔 후 이를 github에 push하지않았거나,
- github에 push를 했는데 pythonanywhere에서 다시 git pull을 하지않아서....
이런 창을 보게된다면 세가지를 확인해보자..!!
그 후에도 오류가 개발자 도구로 보니 빨간 오류가 많았다.
⛔ Error2
다음과 같은 오류가 발생했는데, 아마 AJAX를 해결 못한 듯 하였다.
🗨 GET http://localhost:8000/EVapp/loadMapData/1 net::ERR_FAILED jquery-3.3.1.min.js:2
GET net::ERR_FAILED
이게 왜이런가 잘 보니 분명 나의 URL은 myname.pythonanywere.com인데
ajax에서 url을 http://localhost:8000/EVapp/loadMapData/1 다음과 같이 설정해두어서 못가져왔던 것이다.. omg.. ajax의 코드를
다음과 같이 바꿔주었더니 해결이 되었다 ㅠ 진짜 바보같은 실수...
⛔ Error3
그리고 다음과 같은 오류를 발견하였다.
Access to XMLHttpRequest at 'http://localhost:8000/EVapp/loadMapData/1' from origin 'http://----.pythonanywhere.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
*no 'access-control-allow-origin' header is present on the requested resource.*
해석: CORS 정책에 따라 : 요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다.
✔ CORS란?
CORS(Cross-Origin Resource Sharing)란 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조
해결은 간단했다.
pythonanywhere bash에서
pip install django-cors-headers추가해주면, 오류가 해결 되었다.
⛔ Error4
나는 카카오 맵 API에 있는 라이브러리를 사용했는데 이게 pythonanywhere에서는 적용이 안되서 다음과 같은 빨간 오류가 떴다.
Failed to load resource: the server responded with a status of 401 (Unauthorized)
이 부분은 카카오 개발자 사이트에서
내 애플리케이션>앱 설정>플랫폼 web 사이트도메인에 http://----.pythonanywhere.com를 추가해주면 된다.
⛔ Error5
다음의 오류는 카카오 맵에서 현위치를 가져오는 getcurrentposition()을 사용할 때나는 오류다.
getcurrentposition() and watchposition() no longer work on insecure origins. to use this feature, you should consider switching your application to a secure origin, such as https. see https://goo.gl/rsttgz for more details.
현재 위치를 가져오기 위해서는 HTTPS로 연결해야하는데 PYTHONANYWHERE에서 HTTP로 접속된다.
따라서, 서버에 HTTPS인증을 해결해야 한다. 방법은 서버에 httts를 인증받는 거라는데 아직 해결을 못해서 해결하면 수정해놔야겠다.
localhsot에서는 예외적으로 HTML5 Geolocation API 사용이 가능하여 제대로 작동한다.
결론은 Geolocation API를 사용할 수 있는 건
- HTTPS에서 가능
- localhost에서 가능(예외)
이기 때문에 http에서는 안된다...!
