[Error Handling] Oauth 로그인 시 CORS 에러

 

Oauth 로그인 구현 시 CORS 에러가 발생하던 증상과 해결했던 사례에 대한 복기!

클라이언트에서 Oauth 로그인 클릭 시 네트워크 탭

 

증상: 화면에서 Oauth 로그인 버튼 클릭 시 네트워크 탭에서 CORS 에러가 발생하고 로그인이 안됨

 

에러 발생한 요청의 상세 내용

콘솔 창에서의 상세 에러 내용

 

상세 내용: 콘솔 창에서 뜬 상세 에러 내용

Access to XMLHttpRequest at '클라이언트주소' (redirected from 서버주소/해당콘트롤러주소) 
from origin '클라이언트주소' has been blocked by CORS policy : Response to preflight request 
doesn't pass access control check : the value of the 'Access-Control-Allow-Origin' header 
in the response must not be the wildcard '*' when the request's credentials mode is 'include', 
The credentials mode if requests initated by the XMLHttpRequest is controlled 
by the withCredentials attribute.

해당 에러 내용에 따르면, Access-Control-Allow-Origin header가 * 카드인데 withCredentials 옵션을 include 로 해뒀으므로, Access-Control-Allow-Origin을 특정시켜야 한다. 뭐 이런 내용으로 써져 있는데, 당시에 서버쪽에서는 CORS 미들웨어를 이용하여 Origin을 클라이언트 주소로 특정시켜둔 상황이었다. withCredentials 옵션은 True 로 설정해둔 상태

해결법을 찾기 위해서 열심히 구글링을 하다가 내가 작성한 서버 콘트롤러 코드의 로직이 이상이 없는지를 다시 한번 살펴 보았다.

해당 콘트롤러의 상세 코드 일부

서버 단의 controllers/google.js 에서 해당 로직을 작성하였는데, 자세히 살펴보다보니 마지막에 res.status(200)으로 응답을 보냈는데, 그 다음에 res.redirect(process.env.CLIENT\_URI)로 다시 리다이렉트하도록 작성한 것을 확인했다.

응답 보내고 끝을 냈는데 다시 리다이렉트를 보낸다고? 뭔가 로직이 이상한데? 라고 생각했고 구글링을 하면서 Oauth 로그인을 구현하다보니 코드 응답이 섞였던 거 같다고 깨달았다.

1개의 요청에 대해서 1개의 응답을 보내주면 되니깐, 마지막에 클라이언트 쪽으로 데이터를 담아 응답을 보내주고 깔끔하게 끝내면 그냥 문제없이 잘 돌아가지 않을까? 라고 생각했고

서버쪽 controller의 해당 코드 수정

해당 부분에서 리다이렉트 부분을 제거하고 res.status(200).json({data: payLoad})로 데이터 정보를 담아 전달하게 고쳤다.

 

해결법

// 70~72번 라인의 이 부분에서

res.status(200)

res.redirect(process.env.CLIENT_URI)

// 아래로 수정

res.status(200).json({ data: payLoad })

그랬더니 CORS 에러 없이 잘 해결되었다는 사실...

CORS 에러가 해결된 모습

항상 코드를 짤 때는 기본적인 부분을 잘 생각해야 한다는 걸 느꼈다...1요청 1응답