[2019.06.04] 오늘의 TIL - passport로 Facebook 로그인 시 cors 에러가 나던 문제

passport... 이녀석 정말 한 번 적응하기 너무 어렵다..ㅜㅜ

어제도 이녀석 때문에 밤새 나를 괴롭혀놓고, 오늘도 오전 내내 나를 괴롭힌 또 다른 문제가 하나 있었다..

facebook strategy 방식의 로그인 기능을 구현하려고 passport로 구성시켰다.

passport.use(
    new FacebookStrategy(facebookCredentials, function(
      req: any,
      accessToken: any,
      refreshToken: any,
      profile: any,
      done: any
    ) {
      console.log(profile);
      done(null, profile); // profile이 facebook을 통해 계정 정보를 담고있는 변수
    })
  );

 

웹 브라우저 주소창에 해당 라우터 경로를 입력하고 접속을 해봤다.

profile 내용들이 주소창에 잘 찍힌다. 

그래서 클라이언트 단의 리액트에서 '페이스북 로그인' 버튼을 눌러서 axios 요청으로 데이터를 찍어보려고 했다.

facebookLogin = () => {
  axios({
      method: "post",
      url: "http://localhost:3001/auth/facebook",
      headers: {
        "Content-Type": "application/json"
      }
  })
}

 

그러자 개발자 도구에서 XMLHttp request 요청 관련 빨간 에러 메세지가 나타났다...

'xmlhttprequest error origin null is not allowed by access-control-allow-origin'

cors 문제가 나는 것이다... (망할 녀석의 cors....)

문제 해결 방법

버튼 클릭 이벤트로 axios 요청을 보내면, 해당 서버에서 cors를 열어줘도, facebook과의 통신 때문인지.. 외부 서버의 cors에서 걸리는 것 같다.

해당 문제는 axios 요청이 아닌, a href 링크로 접속하면 cors에 걸리지 않는다.

그래서 '페이스북 로그인' 버튼의 이벤트에 axios 요청을 보내는 것이 아닌, button을 a태그로 감싸고 href 경로를 해당 서버의 라우터 url로 걸어줬다.

<a href="http://localhost:3001/auth/facebook">
  <button className="sotialButton">
    Log in with Facebook
  </button>
</a>

 

그러니 서버에서 facebook 계정의 데이터를 잘 찍히는 것을 볼 수 있었다.

그런데 또 다른 문제는, 페이스북 계정 정보를 이용하여, JWT 토큰을 만들고 클라이언트가 받아야 하는데,

href 접속을 하니까, 자바스크립트로 응답 값을 받는것이 아닌, html 브라우저로 응답 값을 뿌려버리는 것이다...

 

이럴 때는 여러가지 방법이 있겠지만, 우선 내가 알게된 방법은 두가지다

첫번째 방법

내가 해결한 방식은 서버에서 클라이언트에서 redirect를 시켜주면서, url 파라미터 값에 토큰을 넣어주는 것이다.

app.get('sendToken',function(request,response){
	/* 토큰 처리 후 */
    response.redirect('/getToken?token=토큰값');
});

 

그러면 클라이언트 단의 리액트에서 'getToken'으로 이동되면서 파라미터 값으로 토큰 값을 추출할 수 있다. 추출 후에는 바로 정상적인 페이지로 리다이렉트 작업을 해야될 것이다.

두번째 방법

토큰을 얻고난 뒤, 웹소켓을 뚫어서 데이터를 전송하는 것이다...