[CORS] CSR에서 google oauth2.0 적용기

자주 볼 수 있는 CORS에러지만 에러가 뜨지 않을거라 자부했었기에 그 경험을 공유하고자 한다.

 

문제 상황

1. Client Side Rendering

- front: React

- back: Express.js

 

2. Oauth 로직

- 프론트에서 구글 로그인 버튼 클릭 시 GET /api/auth/login/google로 요청

- 백에서는 passport를 활용하여 google oauth를 실행하여 google url로 요청

1~2줄의 XMLHttpRequext at url로 요청이 들어감

- 짜잔! No Access-Contorl-Allow-Origin

 

 

시도한 해결 방법

이번 cors 에러는 로컬에서 프론트(http://localhost:3000), 백(http://localhost:3001)을 따로 열어 시도했을 때부터 발생했다.

 

1. front package.json에서 proxy 옵션 적용

2. back express에서 cors() 함수 실행

참고: https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-cors-%EB%AA%A8%EB%93%88#1._%EC%A7%81%EC%A0%91_%ED%97%A4%EB%8D%94%EC%97%90_%EB%AA%85%EC%8B%9C

 

기존의 프로젝트 구조를 해치지 않는 선에서 해결방법을 적용하였으나, 계속 같은 오류가 발생하였다.

결국 ORIGIN이 달라서 생기는 문제인가 싶어, 배포할 때 프론트와 백이 같은 도메인 URL을 가진다면 문제가 없을 것 같다는 생각이 들었다.

 

3. nginx reverse proxy

참고: https://jcdgods.tistory.com/474

redirected from 'url'에서 url은 백엔드 api url이며

from origin 'url'은 프론트 url이다.

 

같은 도메인이지만 CORS 오류가 발생하고 있는 모습이다.

 

이에 근본적으로 passport를 사용하며 CSR 방식으로 웹을 구현하는 경우엔 백에서 google login에 접근하는 요청을 보내면 안되는건가 하는 의문이 들었다.

 

4. client side에서 google url 요청하기

프론트 분의 도움을 받아, client side에서 구글 로그인 요청을 보냈고, 성공했다!

 

 

평가

 

CORS가 뜨지 않는 상황으로 우회한 것이지, CORS를 정면돌파하지 못했다.

 

계속 검색해본 결과 아래와 같은 방법을 추가로 도전해볼 수 있을 것 같다.

 

1. passport를 사용하지 않는 방법(https://developers.google.com/identity/protocols/oauth2/web-server)

2. 클라이언트에서 window.open을 쓰는 방법(https://www.anycodings.com/1questions/157081/cors-error-while-implementing-google-oauth2-mern)

을 추후에 도전할 것이다.