죽음의 CORS ERROR

    반응형

    정말 요상한 에러를 겪었다.


    POST

    GET(글 목록/회원 정보 조회), POST(회원가입/로그인), DELETE(회원탈퇴) 세 가지 HTTP Method를 테스트 해보았다.

    당시 환경은 프론트 팀원 로컬 - ngrok으로 포워딩된 내 로컬

    그런데 모든 API에서 CORS가 나지 않고,, GET에서만 CORS 에러가 났다.

    회원가입, 로그인, 회원 탈퇴 전부 되는데도!! 회원정보를 불러오지를 못 했다.

    Preflight를 보내지도 않았다. 내 짧은 지식으로는 이해가..힘들었다🥹

     

    문제를 인식하게 된 과정은 이렇다.

    1. 로그인은 되는데 글 목록 조회에서 에러가 발생해서 ->

    2. 설마 로그인은 처음에 Authentication Filter를 타서 되는 건가 싶어서 ->

    3. 회원가입도 회원탈퇴도 시도해봤는데 ->

    4. 다 되고 글 목록만 못 가져와서 ->

    5. 혹시나 싶어 회원 정보도 호출해봤는데

    가져오지 못했다.

    결국  GET 메서드만 자꾸 Cors error를....... 뱉는 것이었다...

    안 될 거면 다 되지 말지..🥲

     

    문제점 + 해결 방법을 찾으면서 힘들었던 점은

    테스트가 프론트 팀원 로컬 - ngrok으로 포워딩된 내 로컬 서버와 연결해서 진행되었기 때문에

    디버깅을 하기 힘들었다는 점이다.

     

    내 서버에 연결된 사람이 여러명이었고, 계속해서 요청을 보내기 때문에

    그 때마다 브레이크 포인트를 거쳐가면서 흐름 따라 확인하기 어려웠기 때문이다ㅠ_ㅠ

    삼일절을 앞두고,,,,,,,,,,,,,,,,,

    그래도 휴일인데 CORS때문에 머리를 감싸긴 싫어서 후딱 해결하자 싶어 로컬 테스트를 위해 프론트 코드를 열었다.

    구글은 정보의 바다이기 때문에 axios를 사용할 수 있는 방법이 아주 잘 나와있다ㅎ_ㅎ

     

    솔직히 좀 기대했다.

    client 코드를 내 로컬에서 실행했다, ngrok을 다시 구동했다... 등등 이전 테스트 환경과 다른 점이 몇 가지 있어서

    아까와는 다른 결과가 나오지 않을까... 해서 말이다^ㅡ^

    놀랍게도 똑같이 GET 요청만 빨간 CORS error가 떴다..........

     

    저녁도 먹었겠다 마음을 다잡고 우선 DB부터 비웠다.

    테스트 데이터가 마구 쌓여있다보니 뜻밖의 에러도 발생했고 (덕분에 버그를 찾았다ㅎ;;;;;;)

    암튼 정신이 없었기 때문에...

    그리고 클라이언트/서버를 둘 다 띄워놓고 디버깅을 시작했다.

    요청이 유효하지 않거나 PreFlight 요청이라면 다음 필터로 넘어갈 수 없다.
    이 부분에서 한 번 allowCredentials가 true + allowedOriginsr가 * 이면 안 된다는 오류를 보기도 했다.

    근데 GET 요청은 아예 CORS 필터 자체를 타지 않았다.

    Preflight도 안 보내고 cors 필터도 안 탔다...

    뭐지 싶어서 내 마음대로 header도 추가해서 보내봤는데 똑같았다. (왜지???? 진짜 왜지???)

    무슨 설정이 잘못된 건지,,

    이것저것 해보면서 지저분하게 주석처리 되어있던 CORS 설정 코드를 다 정리했다.

     

    그리고 시도를 해봐도 에러는 여전했다.

    그러다 GET 요청 때만 axios 요청 시에 "withCredentials: true"를 넣어봤는데

    필터를 타기 시작했다.

     

    근데,, 분명 처음에 테스트 할 때도 같은 CORS 설정에

    프론트 팀원분들도 withCredentials를 같이 보내주기도 했었는데

    어째서 갑자기 되는지 모르겠다...

    백엔드 동료분과 내 코드도 마법처럼 갑자기 됐으면 좋겠다는 대화를 나누었는데

    진짜 그렇게 됐다ㅋㅋ

    재미삼아 받아온 내용을 뿌려봤는데

    class를 바탕으로 리액트를 썼다가 hook으로 하려니 익숙치 않아 괜한 시간을 잡아먹기도 했다

    그래도 성공했다는 게 기뻐서 그것마저 재미있었던 것 같다..................


    결론은...... 별로 처음 테스트 할 때와 다른 내용은 없었다ㅠ

    다만 CorsFilter로도 적용해보고, CorsConfigurationSource로도 적용해보고, credential을 넣었다가 뺐다가...

    뭔가 경우의 수가 많아지면서 딱 맞는 설정이 안 이루어졌기 때문이 아닐까

    라고 생각은 해본다.

     

    그냥 답답했는데 1차적으로는 문제가 해결되어서 가뿐한 마음에 글을 남겨봤다🥲

     

    걱정되는 건 되다가 또 갑자기 안 되는 상황과

    S3, EC2에 배포해서 연결해보았을 때 안 되는 상황이

    자꾸 눈앞에 보이는 것 같아서 

    뛸 듯이 기뻐하지는 못 하고 있ㄷㅏ 。。。

    반응형

    댓글