이번 블로그에서는 CORS문제에 대해서 알아보겠습니다 !!!
몇일전에 프론트엔드에서 일을 하고 있을 때 이런 현상이 발생했습니다 !!
아 ! 일단 백엔드쪽보다는 프론트쪽을 기반으로 설명하겠습니다 ! ( 백엔드쪽은 지금은 아니지만 나중에 다뤄보겠습니다 ㅜㅜ)
여러가지로 나뉠 수 있는데
일단 로컬환경 / 알파환경에서 로그인 처리 or 다른 페이지의 소스(html)를 그대로 가져오려고 할 때 !
CORS가 발생했습니다 !!!
CORS란?
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
음 솔직히 저도 저렇게만 봐서는 이해가 팍!! 안왔습니다 !!
다시 말하자면 !!!!
즉 !! 제 사이트에서 (로컬이든뭐든) 어딘가의 API를 통해서 정보를 가지고 올 때 발생합니다 !!!
즉 ! 만약 제 사이트에서 페이스북의 로그인 api를 안다고 가정하고 페이스북에 로그인 API를 요청했을 때 ! 로그인이 당연히 되면 안되겠죠??? 이것을 방지해주는겁니당 !
어? 나는 CORS가 발생안하는데?
물론 그런거같습니다 ! 저도 회사에서 일을 하다보면 특정 api에서만 CORS가 발생한거같았습니다 !
그래서 결론지어보자면 특정 api들은 ! ( 오픈 api라던가 ) 뭔가를 설정을 했기 때문인거 같습니다 ! ( 아니면 자동 설정 됐다던가)
서버쪽에서의 설정
Access-Control-Allow-Origin을 설정하자!
서버쪽에서의 설정은 저도 찾아본 결과
Access-Control-Allow-Origin 이것을 설정해주면 됩니다 !
res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
위와같이 Access-Control-Allow-Origin에서 설정해주고싶은 주소를 써줍니다 !! 물론 * 이렇게 쓸수도 있으나 이건 all이라는 것으로 모든 url에 대해서 허용이 가능하니 가급적이면 보내고싶은곳을 써줍니당 !
또, 크로스 도메인의 경우, header에 'X-Requested-With' : 'XMLHttpRequest'넣어 송신하지 않으면, api측에서 비동기인지를 전해주지 않기때문에 적어줍시다 ! ( 비동기 인식을 위해서 )
여기까지가 기본적으로 서버쪽에서 설정해줄겁니다 !!!
프론트쪽에서 설정이 있나?
프론트에서는 딱히 설정해줄것들이 없는거같습니다 !
하지만 !!! 저는 프론트에서 가지고 있는 쿠키값들을 다시 온전히 백엔드로 넘길 때 "Null"을 가지고 왔습니다 !
순서로 따지면 !!!
저런식이였습니다 !!! 왜 저렇게 써??라고 생각하시는 분들도 계시는데 ㅜㅜ 회사에서 저런 방식으로 로그인이 되고 나서 생성된 쿠키를 다시 서버에 보내서 로그인 유저 정보를 가지고 와야했습니다 ㅜㅜ ( 참고로 api로 요청 할 때 자동으로 쿠키를 보내주지 않습니다 ! )
여기서 ! 여러분들도 혹시 프론트쪽에 쿠키를 다시 서버에 보낼 때 !
그 설정 방법!
저는 단순히 제가 원하는 cookie를 headers에다가 설정해주면 보내지는 줄 알았습니다 !!
결과는?!
물론 실패 ㅜㅜ 브라우저에서 cookie를 설정해서 보내는것을 막아놓은거같더라구요 !!!
그래서 !!! 해결책은 밑에서 !
프론트 : withCredentials : true
서버 : Access-Control-Allow-Credentials : true
이렇게 해주시면 됩니다 !!! 저 withCredentials 의 옵션이 뭐냐면
도메인간의 쿠키를 허용해준다 !!! 입니다 !!!
저걸로 쿠키전송까지 완벽히 할 수 있습니다 !!!
쿠키값을 전송해야하는데 안되가지구 ㅜㅜ 너무 고생한 경험이 있으니 확인해주세용 ^^
여기까지입니다 !!!
아직 부족한점이 많지만 !! 모르는게 있거나 틀린게 있으면 언제든지 말 해주세요 !!!
그럼 앞으로 더 유익한 정보를 가지고오겠습니다 !