Cors error

REST API
1

안녕하세요
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.

2

안녕하세요.
kauth는 CORS가 열려있어서 그냥 호출하시면 되는데요.

어떤 방식으로 호출하시나요?

3

답변감사합니다

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)

})
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- 카카오 로그인, 카카오 친구목록 조회, 메시지 발송

5

답변 감사합니다 ^^ 해결되었네요

1개의 좋아요