프론트의 서버 인증 (쿠키, 토큰, 세션) 1

회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다.

아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠.

 

1) CORS 에러와의 싸움 

2) 401과 403 코드의 콜라보

3) 응답 헤더에 접근 불가

4) 요청헤더에 토큰 넣기

 

해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다.

 

 

1) CORS와의 싸움

 

💡CORS가 정확히 어떤건가요?

→ cors는 동일 출처가 아닌 다른 출처의 리소스를 사용중이라는 것을 의미합니다. 기본정책인 sop (같은 출처 리소스 사용)를 위반하
    고 있으니, 다른 출처 리소스를 사용하고 싶다면 권한을 부여하라는 것 입니다. 따라서 프론트에게 서버에 접근할 권한이 없다는 것을
    뜻합니다.  

    자세한 CORS 개념은 전에 적어둔 post를 참고해주세요 → https://zi0ne.tistory.com/36

CORS

 

→  서버가 cors 설정을 했는지 확인을 해보는 것이 좋습니다. (서버 측에서 확인이 바로 안될 수 있으니, 프론트가 브라우저를 확인 후,
      어떤상황인지 상황을 공유해주는 것이 필요합니다.)

      cors를 해결하는 미들웨어도 있으니, 확인해보는 것도 좋습니다.

 

→ cors에러를 온전히 서버의 몫으로 돌릴 수 있는 것은 아닙니다. 서버가 cors 설정을 해줘도 문제가 생긴다면, 프론트에서도 해결
    해봐야죠.

 

 

     프록시 설정

     (인증 뿐 아니라, 서버와 연결할 때 언제든 사용하면 대부분의 상황에서 연결 가능합니다.)

    프록시를 통해 다른 네트워크 서버스에 간접적으로 접속할 수 있게 해주는 방법으로, 

    대부분 차단 우회의 목적 혹은, 내 주소를 숨기기 위한 보안의 목적 등으로 사용합니다. 하지만, 같은 개념으로 브라우저를
    속이고 서버와의 연결이 가능합니다.

 

1) 직접 추가

//package.json에 추가합니다.
//요청 시에는 엔드포인트 주소를 빼고 작성합니다. 

"proxy": "http://{서버 엔드포인트 주소}",

 

2) 라이브러리 사용 

https://create-react-app.dev/docs/proxying-api-requests-in-development/ 

Proxying API Requests in Development | Create React App

 

 

++) 배포 전, 개발 단계에서 서버와의 연결이라면 서버 쪽에서 ngrok을 사용하는 경우가 많습니다.

       ngrok은 로컬과 연결해주는 좋은 친구지만, ngrok으로 서버연결 시 연결이 안되는 경우 (GET 요청)

       요청 헤더에 밑의 코드를 추가 하면 작동할 수 있습니다. (에러를 피하는 코드)

'ngrok-skip-browser-warning': '69420'

 

 

 

 

2) 401과 403 코드의 콜라보

 

💡401코드와 403코드 뭐가 다른건가요?

→ 401 (Unauthorized) 는 클라이언트가 인증되지 않았거나, 유효한 인증 정보가 부족하여 요청이 거부되었음을 의미하는
    상태입니다. 내 요청이 해당 권한 밖이어서 인증을 하지 않으면 정보를 제공할 수 없다고 서버 쪽이 알려주는것 이죠.

 

→ 403 (Forbidden) 은 서버가 요청을 이해하고, 클라이언트의 요청이 도달했으나 권한이 없음을 알려주는 코드입니다. 
    401과 다르게 인증을 하더라도, 권한이 없음을 의미합니다. 애초에 접근할 수 없는 부분에 접근했다고 알려주는 것 이죠.

 

1) 올바른 url 확인 (혹은 .env의 변수가 팀원들과 같은 지 확인) 

     생각보다 잦은 실수입니다. git에서는 env를 올리지 않으니, 모든 팀원이 같은 이름의 변수를 사용하고 있는지 url이 안바뀐게 맞는 지 확인은 
    스스로가 자주 체크해야합니다.

 

2) 토큰을 제대로 받고 헤더에 넣었는지 확인

      토큰이 제대로 전달이 안되고 있을 수 있습니다. 
      브라우저의 개발자 도구에서 Network에 들어가, 페이지에서의 로그인 or 다른 액션을 취하고 확인하면 request와 response 헤더를 확인할 수
      있습니다. Cookie 혹은 Token , Refresh Token 등 자신이 헤더에 넣은 내용이 올바르게 들어가 있는 지 확인 후, 해결 합니다.