CORS(Cross-Origin Resource Sharing) 에러에 관해

CORS(Cross-Origin Resource Sharing), 교차 출처 리소스 공유는 HTTP헤더를 사용하여 실행중인 웹사이트가 다른 도메인의 자원에 접근할 수 있도록 브라우저에 알려주는 체제입니다. 즉, A도메인의 프론트엔드 스크립트가 B도메인을 호출하면 브라우저에서는 기본적으로 요청을 제한합니다.

 

프론트엔드 스크립트에서 Ajax라 불리는 비동기 통신방식을 사용하면, 브라우저에서 제공하는 XMLHttpRequest 함수를 호출하게 됩니다. 동일 출처 정책에 따라 호출받는 서버에서 별도의 허용 설정을 하지 않는한 호출은 차단됩니다. 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

 

카카오의 CORS 정책

kauth는 CORS가 열려있어서 ajax로 요청해도 CORS 에러가 발생하지 않지만, 반면에 kapi는 CORS가 닫혀있어서 에러가 발생합니다.

즉, 프론트엔드 스크립트에서 kapi.kakao.comAPI호출은 허용되지 않습니다.

CORS가 열려있는 kauth.kakao.comAPI의 경우에도 리다이렉트 URI로 되돌아가야하는 로그인(인가요청, 추가 항목 동의받기), 로그아웃은 ajax 방식으로 호출 할 수 없습니다. 즉, kauth.kakao.comAPI는 토큰 요청만 가능합니다.

CORS해결을 위해서 프론트엔드 스크립트에서 브라우저를 이용한 요청이 아니라 백엔드에서 REST API를 직접 호출해야합니다.

Kakao Javascript SDK v2.0 이 출시되며 CORS를 모두 오픈하여 프론트엔드에서도 kapi 를 호출할 수 있게 되었습니다. 

 

Frontend에서 카카오의 kapi 호출 방법

Javascript SDK의 Kakao.API.request를 사용하면 Frontend에서도 kapi 호출 가능

ex) https://developers.kakao.com/docs/latest/ko/kakaotalk-social/js

 

에러 사례

1. 프론트엔드에서 ajax, jquery, axois 등으로 카카오 REST API 호출하여 CORS 에러발생

2. 프론트엔드에서 백엔드 호출하여 카카오에 인가 요청 할 때. 백엔드에 CORS설정을 하지 않은 경우

3. 인가 요청 시, 헤더를 커스터 마이징 하여 CORS 에러발생 

다른 호출 에러 사례

1. node.js 에서 axios이용하여 unlink 요청 시 Request Data 인코딩 안되어 토큰을 인식 못하는 경우

{“msg”:“no authentication key!”¸“code”:-401}

https://kakao-tam.tistory.com/66

 

2. 프론트엔드에서 인가 요청을 Ajax로 하거나 토큰 요청 시, Reqeust Data 인코딩이 안된 경우

https://kakao-tam.tistory.com/59

 

예제

- Frontend (http://localhost/) 에서 Backend node.js (http://localhost:3000/) 로 카카오 로그인 요청 시, corsOptions

https://devtalk.kakao.com/t/rest-api-node-js/119865