[TIL] Day 46 카카오맵 API CORS 오류

발생 오류

Access to XMLHttpRequest at 'http://dapi.kakao.com/v2/local/search/keyword.json?query=&page=1&size=15' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

 

발생 상황

카카오맵 API 사용시 지도는 잘 보이는데 검색기능을 이용해서 마커를 찍을 때 해당 에러가 발생했다.
팀원은 작동이 원활하게 되고 나는 안돼서 github pull 충돌 해결시 코드가 누락이 된 것 같아서 클론을 다시 받아서 진행해봐도 동일한 현상이 있었다.

 

 

원인

찾아본 결과 헤더에 strict-transport-security 옵션이 활성화되어 생긴 문제라고 한다.

도대체 무슨 소리인지 모르겠어서 더 찾아봤다.

 

서버 측에서 요청을 수락할 수 있도록 CORS 헤더를 설정해야 한다.

서버 측에서는 Access-Control-Allow-Origin 헤더를 포함하여 요청을 허용할 도메인을 명시적으로 지정해야 한다.

Kakao API 서버가 이 헤더를 올바르게 설정하도록 확인한다.

 

여기까지 봤는데도 아직도 모르겠어서 해당 키워드로 직접적인 해결방법을 찾아보았다.

 

많은 원인 중 가장 크롬 브라우저 캐시오류일 가능성이 제일 높았다.
이 문제가 맞는지 정말 간단하게 확인해보는 방법은 시크릿모드 창을 열어서 http://localhost:3000/에 접속하여 동작해보는 것이다.
여기서 원활하게 동작한다면 캐시오류가 맞다고 본다.

 

 

해결 방법

1. 오류가 나는 페이지(http://localhost:3000/)를 켠다
2. 개발자 도구를 열어준다 
   • -Windows: F12
   • -Mac: Command + Option + I
3. 상단 주소창 왼쪽 새로고침 아이콘에 마우스 우클릭
4. 캐시 비우기 및 강력 새로고침

해당 방법으로 해결이 되었다.
다른 사용자의 문의 내용을 보니까 일시적인 해결법인거 같기도 한데... 일단 해결... 내 코드 문제가 아니었다..!
해당 오류를 겪는 사용자는 많은데 정확한 해결방법을 찾기 어려워서 정리해봤다.
혹시나 해당 오류가 발생하는 분이 있다면 시도해보면 좋을 것 같다!

 

 

드디어 정상 작동!

그 외의 문제 원인 및 해결방법 찾아본 것

1. 크롬 확장프로그램 충돌
-ad blocker 같은 광고 차단 플러그인이 브라우저에 깔려있는지 확인 부탁드립니다.
해당 플러그인이 있으면 스크립트를 block 할 수 있기 때문에 끄고 사용해주세요.

2. http로 호출 되어서 충돌
-http를 https로 바꾸면 정상동작. http에서 호출하시는 분들은, https로 바꿔서 호출 시도해보세요.

 

 

 

참고

다른 사용자 문의사항
https://devtalk.kakao.com/t/cors-policy/124716?u=lea.ju

주소검색시 CORS policy 오류

 

 

브라우저 캐시 비우기 및 강력 새로고침 활용하기
https://imweb.me/faq?mode=view&category=29&category2=47&idx=71559

브라우저 캐시 비우기 및 강력 새로고침 활용하기