🚨 Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
개발자라면 한 번쯤은 만날 CORS ERROR
이번 서비스를 구축하면서 날 제일 힘들게 한 건 이 에러가 아닐까 싶다🫠
백엔드 개발을 다 마치고 프론트랑 연결하는 작업을 진행중인데 프론트엔드 개발자 분이 계속 이 에러가 뜬다고 하셨다.
Django Rest Framework를 사용해서 개발중인 나는
django-cors-headers도 install하고 settings에도 다 추가하고 할 수 있는 처리를 다 했음에도 계속 같은 에러가 떠서 혼돈 그 자체였다
포스트맨이나 브라우저 상에서 접근하는건 가능하지만
프론트엔드에서 버튼을 클릭해서 함수로 접근하면 안된다?
이게 무슨 홀리ㅅ..같은 경우인가 흐엉
구글링을 하고 이것저것 유추를 해본 결과
우리는 ngrok을 이용해서 포트포워딩을 하고
그 포트포워딩이 된 주소로 테스트를 돌리고 있었다.
그게 문제였던거 같다!
ngrok은 자동으로 https 처리를 해주는데
그걸로 인해 cors error가 생기는 문제였다!
사실 이게 맞는지도 잘 모르겠다!
이것저것 시도하고
django에서 ssl처리를 했는데도 안돼서
EC2에 gunicorn으로 배포를 한 후 테스트를 할 때는
너무나 잘 되는걸 보니
문제는 저거였구나라고 유추하는거일뿐...
험난하고 어려운 개발자의 길
화이팅,,,..
