안녕하세요
react rest api 를 사용하고있는데
아래와 같은 오류가 나서 혹시 해결 방법이 있는지 문의 드립니다.
해더에 Access-Control-Allow-Origin’: ‘*’ 추가 하였지만 오류가 나고있는데 혹시 방법이 있나요?
호출하려는 api는 kauth.kakao.com/oauth/authorize 주소입니다.
een blocked by CORS policy: Request header field access-control-allow-methods is not allowed by Access-Control-Allow-Headers in preflight response.
tim.l
3월 24, 2022, 5:23오전
2
안녕하세요.
kauth는 CORS가 열려있어서 그냥 호출하시면 되는데요.
어떤 방식으로 호출하시나요?
답변감사합니다
Kakao Account > api 는 앵커태그로 get 이여서 해결했는데
https://kauth.kakao.com/oauth/token > 토큰요청은 post 방식이라 아래와 같이 요청하구 있습니다.
error는 아래 내용입니다.
Access to XMLHttpRequest at ‘https://kauth.kakao.com/oauth/token ’ from origin ‘http://:3001’ has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
호출은 아래와 같은 방법으로 하구있습니다.
( 인가코드를 받은뒤 window.Kakao.Auth.login 방식으로 받는 방법은 없나요 ? )
const config = {
url: url,
method: 'POST',
data: params,
headers: {
'Content-Type' : 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
crossDomain : true,
},
credentials: 'same-origin'
}
axios(config).then(function (ret) {
resolve(ret)
})
tim.l
3월 24, 2022, 6:21오전
4
넵, 인가요청(authorize)는 카카오측 페이지 이동 후, 리다이렉트 하므로
브라우저내 XMLHttpRequest를 사용하는 ajax방식으로 사용하시면 안되고 처리하신 것 처럼 a태그로 이동해야합니다.
카카오 로그인 이후, 리다이렉트 URI로 되돌아가서 token조회하는 경우 ajax 로 호출 가능합니다.
(위에 설명드린 것 처럼, kauth는 CORS가 열려있어서 credentials 설정할 필요 없습니다.)
다만, 토큰 받기 가이드와 같이 "Content-type: application/x-www-form-urlencoded;charset=utf-8"로 설정하지 않으셔서 Request가 정상 처리 안되는 경우가 있으니 아래 게시물 참고 해주세요.
카카오 로그인 시 Ajax 사용 가능한가?
JS SDK의 Kakao.Auth.login 방식은 팝업을 띄우고 팝업내 통신으로 별도 토큰 요청 없이, 토큰까지 리턴 받는 방식입니다.
가이드 참고 부탁드려요.
예제도 참고해보시면 좋을 것 같아요.
[Javascript SDK 예제] 카카오 로그인, 카카오톡 공유, 채널추가 (deprecated)
[rest api 예제] node.js- 카카오 로그인, 카카오 친구목록 조회, 메시지 발송