[Node.js / Express] CORS 에러 해결하기

클론 코딩 프로젝트를 진행하던 중 CORS 에러와 마주하게 되었습니다. 상황은 POSTMAN 통신을 통해 프론트에 전달되는 값을 확인하는 과정이였는데요, 크롬 브라우저에 직접 API 주소를 넣으면 통신이 되는데 postman을 사용하거나, 프론트와 통신을 하는 경우에 CORS 에러가 발생하였습니다.

 

개발환경은 Node.js 8.11/express 4.18 버전 / Layered Pattern 적용을 하여 개발을 하고있었습니다!!

 

 

CORS 에러가 발생할 수 있는 상황은

1. http 와 https 혼용

2. 클라이언트와 서버의 포트 번호가 다른경우

 

등이 있다고 하는데요, 확인 해본 결과 위 사항들은 문제가 없었습니다.

그래서 Referrer Ploicy 메세지인 strict-origin-when-cross-origin를 검색하니 저와 같은 문제를 마주한 사람들이 많이 계셨던것 같습니다..Access-Control-Allow-Origin을 허용하거나 다른 작업을 해서 해결하신 분들이 계셨습니다..(능력자분들 존경해요..)

 

저는 의외로? 간단하게 해결을 했는데요 제가 해결한 방법을 공유드리니 참고 해보시길 바라겠습니다.

 

해결방법

app.js에서 cors 미들웨어 선언 위치 변경하기

이전의 경우에는 미들웨어를 라우터 아래에서 등록을 해줬습니다. (어라.. 라우터가.. 왜.. 두개지..?)

그래서 미들웨어의 위치를 위로 올려주었더니 문제가 해결되었습니다.

제가 내린 결론은 라우터 보다 cors 미들웨어를 먼저 선언 해주면 해결이 된다! 인것 같습니다 감사합니다