[개발 기록] 로그인 기능_오류 해결과정(with KAKAOAPI)

 

 

 

[이전글 : 오류 발생 기록]

https://footprint-of-nawin.tistory.com/36?category=875736

[개발 진행] 로그인 기능_미완성(with KAKAOAPI)

 

[이후글 : 해결 기록]

https://footprint-of-nawin.tistory.com/46?category=875736

[개발 진행] 카카오 로그인 해결(with cors 에러)

 

 

1. 정리

[ 이슈 ] 

사용자 토큰을 받아와 사용자 정보를 요청하는 get부분 요청에서 cors정책이슈가 생김. No 'Access-Control-Allow-Origin' header is present on the requested resource 이슈 cors 헤더는 응답하는쪽, api를 제공하는 서버에서 response 헤더에 설정하는 것. cors는 브라우저에서 처리하는데 아마 서버측에서 설정이 안되어있어서 생기는 문제라고 파악. 카카오 서버를 고칠순 없으니 브라우저 측에서 동일 출처간 접근 허용 옵션이나 크롬의 플러그인을 통해서 처리해야한다는 의견을 보아 시도하였으나 해결 되지 않음.ㅜㅜㅜ(버그 지옥에서 살려주세요ㅜㅜ)

[ 해결 시도 ]

1. post header에 'Access-Control-Allow-Origin' 내용을 추가. => 해결 되지 않음.
2. javascript로 개발을 시도 => 로그인을 위한 새로운 창이 열였을 때, blank 화면만 뜸.
3. 플러그인 설치 => 해결되지 않음.
4. jsonp을 이용해 편법으로라도 동일출처원칙을 피해보고자함 => jsonp은 헤더를 추가할 수 없다.
5. 크롬의 보안기능을 내리는 속성을 추가. => 보안에 취약하지만 개발을 우선 해야하므로 이 방법으로 진행.

[ 결론 ] 

크롬의 보안기능을 내리고 사용하는것으로 우선 개발하기로 하였다. 5일 동안 정말 열심히 고쳐보려고 노력했으나 서버쪽에서 해결하는 것이 가장 좋고, 불가피하다면 우회하는것을 추천한다고 하지만... 내경우 axios에서는 정말 해결이 되지 않아서 개발 시점에서만 cors를 피하는 크롬속성을 추가해 보안을 끄는 방법으로 진행하였다.
현재 개발기간때문에 이렇게 넘어 가지만 진행이 완료되면 다시 붙잡고 해결해 보고 싶다.

 

 

-> 이라고 깃헙에 정리를 했다. 하지만 여기는 블로그 이므로 조금 자세하게 시도했던 방법들을 적어보고 기록해보고자 한다.ㅜㅜ 잘 적어두면 나중에 비슷한 에러가 발생하거나, 멘토(가 생겼으면 좋겠다,,)분에게 빈 시간을 이용해 물어볼 수 있을 것 같아 열심히 기록해본다!!

---

[ 해결 시도 ]

1. post header에 'Access-Control-Allow-Origin' 내용을 추가.

header에 'Access-Control-Allow-Origin' 을 추가하였다. 근데이건 알아보니 server-side 쪽에서 설정하는 것이더라....

=> 처음엔 저것만 추가하면 되는구나 하고 열심히 했는데, 좀더 알아보니 이방법은 server-side 쪽에서 해결하는 방법이더라ㅜㅜ. 내가 카카오 서버를 조작할수는 없으니.. 당연히 계속해서 같은 에러가 떳다.

 

---

 

2. javascript로 개발을 시도 

- SDK를 index.html 에 추가하여 초기화를 해준다.

index.html 부분에 SDK를 잘 받아와서 초기화까지 진행. 초기화 결과는 콘솔로 출력

- 실행 했을 시, 결과 true를 리턴했다. 

- 화면에 나온 로그인을 실행시키면, 새창이 생기면서 새창에는 하얀 배경이 나온다.....

로그인을 누르면 새창이 뜨는데 하얀 배경만 나온다ㅜㅜ

- 어찌 이부분을 해결했는데 나온 다음 에러.  이 부분의 에러를 해결 하지 못해 완성을 못하였다.

 

이 부분에서 포기를 하였다.

이 코드부분을 자료조사하면서 다른 분이 올려주신 코드를 참고해서 해봤는데 오류가 난다..

 

<template>
  <div>
    <KakaoLogin
      api-key="이곳은 나의 개인키"
      image="kakao_login_btn_large"
      :on-success='onSuccess'
      :on-failure='onFailure'
      />
  </div>
</template>
 
<script>
import KakaoLogin from 'vue-kakao-login'
 
let onSuccess = (data) => {
  window.Kakao.API.request({
        url:'/v2/user/me',
        success: async res=>{
         console.log("getme : ",res);
         console.log("getme : ",res.kakao_account);
         const account=res.Kakao_account;
        },
        fail:error=>{
          console.log("error : ",error);
        }
      })
  console.log(data)
  console.log("success")
}
let onFailure = (data) => {
  console.log(data)
  console.log("failure")
}
 
export default {
  //name: 'App',
  components: {
    KakaoLogin
  },
  methods: {
    onSuccess,
    onFailure,
    getme(authobj){
      window.Kakao.API.request({
        url:'/v2/user/me',
        success: async res=>{
         console.log("getme : ",res);
         console.log("getme : ",res.kakao_account);
         const account=res.Kakao_account;
        },
        fail:error=>{
          console.log("error : ",error);
        }
      })
    }
  }
}
</script>

 

 

 

---

3. 플러그인 설치

그후에는 이분의 포스팅을 참고 하여 진행하였다.

https://kimyhcj.tistory.com/263

해결 방법 - No 'Access-Control-Allow-Origin' header is present on the requested resource.

- 구글 웹스토어에 들어가서

Access-Control-Allow-Origin 라고 검색하면 나오는 플러그인을 모두 설치해서 진행해보았다.

 

1) 플러그인 첫번째 시도 :

->첫번째 플러그인은 cors 요청에 대한 브라우져의 결과를 보여주는 플러그인이라 두번째 플러그인을 다운받아 on으로 실행을 시켰다. 

 

on으로 틀으니 allow로 바뀐거 확인

-> 로그인 시도

=> 결과 : 해결이 안됐다......................ㅜㅜ

 

 

 

2) 플러그인 두번째 시도 :

-> 첫번째 플러그인을 사용해서 CORS Unblock이 꺼져있을땐 CORS가 blocked 되어있고, 켜져있을 땐 allow 임을 확인.

 

꺼져 있을 때

켜져 있을 때

-> 켜져 있을 때 로그인 시도

=> 결과 : 해결이 안됐다.......2

 

 

따라서 플러그인을 추가하는 방법으로도 해결하지 못했다..

 

 

 

---

4.jsonp을 이용해 편법으로라도 동일출처원칙을 피해보고자함 

=> 또 열심히 자료를 찾아보며 적용하는 중, jsonp에는 헤더를 넣는 방법을 찾다가 알게된 사실...

jsonp에는 헤더를 넣을 수가 없다고한다..

https://stackoverrun.com/ko/q/679802

jQuery.ajax 및 JSONP를 사용하여 헤더를 설정 하시겠습니까?

=> 결과 : 해결이 안됐다.....3

 

 

---

5. 크롬의 보안기능을 내리는 속성을 추가.

정말... 정말 이 방법으로는 하고 싶지 않았지만, 더이상 개발이 밀릴 수는 없어서 마지막 방법으로 적용을 하였다.ㅜㅜ 

이렇게 개발하게 되면 지금은 개발이 가능하지만 전체적인 서비스 측면으로 봤을 땐, 굉장히 위험할것같다는 생각이 들어서 많이 찝찝하다. 그렇기 때문에 우선을 이렇게 진행하지만 나중에 꼭 다시 공부해서 해결 방법을 찾아 봐야겠다.

 

 

 

방법은 아래에 ! 

https://haru.kafra.kr/68

크롬 cross domain 무시하기

 

크롬 속성 맨 뒷부분에  --disable-web-security --user-data-dir="C:\chrome" 를

붙인 다음 확인을 누르면 보안을 내릴수있다. 

 

 

 

- 보안을 내린 후 실행한 결과

 

안정성과 보안에 문제가 발생할수있다고한다ㅜㅜ

 

 

-로그인을 진행한다.

 

 

 

- 결과

 => 토큰을 가져오는 요청 상태 200과 토큰을 이용해 사용자 정보를 가져오는 요청 상태200으로 요청한 내용을 잘가져왔다.

 

 

 

 

---

 

며칠을 이 오류때문에 고생했는지..... 밤도 여러번 새면서 해결하려고 노렸했으나(아침에 출근하려는 엄마와 인사를 몇번이나 나눴던가ㅜㅜ), 나는 웹개발이 이번이 처음이라서 바탕 지식이 많지 않았고, 만나는 해결방법마다 처음 적용해 보는것이라 헤매기도 정말 많이 해멨다. 그러나 결국 차선택을 선택할 수 밖에 없다는 사실이 참 속상했다. 더 붙들고 있기엔 같이 팀플하는 팀원들과의 약속을 깨야했기 때문에 (그렇게 되면 나머지 개발이 굉장히 촉박해진다ㅜㅜ) 나의 한계를 느끼며 타협을 하게되었다. 한계를 느꼈다는게....이렇게 속상 할 줄이야... 심지어 윈도우에서는 문제가없었어서 더 미련을 가지게 된걸지도 모른다. 정말 지쳐가면서 해결방법을 찾던중 밑의 내용을 보고 여기까지 하기로 했다.

https://okky.kr/article/679881

OKKY | vue.js cors 문제

서버쪽에서 해결해주는것이 가장 좋으나 내 상황에서는 불가능하고, 플러그인설치를 시도해봤으나(맞는지는 확실하지 않다..그래서 더 답답하다) 해결이 안됐기 때문에,,,후..... 

 

나중에라도 꼭 정확한 해결방법이나 원인을 이해할수있었으면 좋겠다. 왜 저런 제한이 생기게 된 이유까지도 말이다ㅜㅜ.

 

 

기록 끝!