목표
React JS & DRF 를 이용한 웹 프로젝트에서 JWT Token을 통한 유저 인증을 진행한다. 모든 API 요청마다 유효성을 체크하고, 만약 accessToken이 만료되었으면 refreshToken으로부터 재발급 받아 인증을 인가하는 코드를 작성한다.
문제 인식
- 모든 API 요청마다 accessToken 유효성 체크를 위한 수단으로서 axios interceptor를 사용하기로 했다. Interceptor로부터 Instance를 생성하여 모든 API 요청과 응답을 가로채 상기 목적을 위한 유효성을 검사하고 각 Error state에 맞는 대응을 위해 코드를 작성하였으나, CORS(Cross-Origin-Resource-Sharing) error가 발생하였다.
특이 사항
- Front-end React 처리 시도
1. 요청 headers에 Access-Control-Allow-Origin 서버 BASE URL 설정
2. 요청 headers에 Access-Control-Allow-Headers 설정
3. package.json proxy port 설정 - Back-end DRF 처리 시도
1. config.headers['Access-Control-Allow-Origin'] = '*';
2. config.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
3. config.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
4. Django-CORS-headers 패키지 버전 확인 및 3.13.0 체크
5. settings.py 'django.middleware.csrf.CsrfViewMiddleware 제거
6. settings.py CORS_ORIGIN_ALLOW_ALL = True 설정
7. CORS_ALLOWED_PORTS = ['3000', '8000',] 코드 추가
8. CORS_ORIGIN_WHITELIST 3000번, 8000번 url 적용
주요 쟁점
axios interceptor를 사용하면 모든 http 요청과 응답을 가로채 기존 axios 사용 시 설정해두었던 CORS 처리가 적용이 되지 않는 것으로 판단
- DRF 8000번 포트를 포함한 모든 포트에 대한 CORS를 허용하고 성공 여부를 체크해보려 했으나 모두 실패
- CORS의 무한 굴레에 빠진 기분이었다.
해결
CORS_ALLOWED_PORTS = [
'3000',
'8000',
]
CORS_ALLOWED_HEADERS = [
'accept',
'accept-encoding',
'authorization',
]"Request header field withcredentials is not allowed by Access-Control-Allow-Headers in preflight response."
백엔드 코드 위 설정 후 프론트단 재시도 결과 아래 콘솔 에러를 확인했고 withcredentials와 Access-Control-Allow-Headers사이 문제라고 판단, Instance withcredentials 관련 코드를 지우자 에러가 다음과 같이 바뀌었다.
"Request header field access-control-allow-headers is not allowed by Access-Control-Allow-Headers in preflight response."
뭔가 느낌이 왔다. 곧바로 Instance에서 혹시 몰라 설정해두었던 access-control-allow-headers 코드를 지우자 드디어 response interceptor로부터 201 status 응답을 받는데 성공했다.
회고
프론트 개발을 하면서 필수관문인 CORS에 제대로 발목잡힌 경험이었다.
사실 작년 멋사 내부 진행했던 2학기 프로젝트에서 처음 axios interceptor를 이용한 JWT 기반 유저 인가를 시도했었고 그때도 같은 CORS 이슈로 결국 해결하지 못했었는데, 드디어 큰 산을 하나 넘은 기분이다. 이번에도 해결하지 못하면 나중에도 똑같은 문제가 생길 거라고 생각했는데 시간이 꽤 걸리긴 했지만 결국 성공했다.
백엔드와의 대화가 중요한 대목이다. 인터넷 상에 널린 코드들은 다 자유도를 가지고 있기 때문에 무작정 내 코드에 적용할 수 없다. 이번 기회 덕분에 어렵게만 느껴졌던 Interceptor 작성 방식이나, 흐름에 대해 조금이나마 이해할 수 있었고, 백엔드 설정 방식에 따라 프론트 코드도 바뀌기 때문에 끊임없이 대화하고 조율하면서 최적화 및 에러 슈팅하는 것이 최선이라는 생각이 들었다.
accessToken 만료 전 Interceptor 요청은 성공했으나, 만료 후 accessToken 재발급 및 refreshToken 처리 로직에 대해서는 다시 한번 고민해봐야겠다.
Be different