DRF+ AI) 웹개발 최종 - 5일차

module(js)와 cors의 관계

 

FE에서 js를 모듈식으로 작성한 뒤, 토큰 로그인 등을 시도하자 cors 오류가 발생하였다.

 

원인을 찾아보았다.

모듈의 보안과 CORS

모듈을 임포트 한 자바스크립트 코드를 가진 HTML 파일을 웹 브라우저에서 직접 열면 CORS 오류가 발생한다.

모듈의 보안성 규칙 때문에 발생하는 에러이며, 따라서 모듈이 포함된 코드를 테스트할 때는 반드시 서버 환경에서 테스트를 해야 합니다. 로컬 컴퓨터에서 테스트를 할 때도 로컬 웹서버를 통해서 localhost로 접근해야 한다고 한다. 즉 file://로 웹 브라우저에서 여는 모듈이 포함된 HTML 파일은 모듈 로딩 시점에서 CORS 에러가 발생(프로토콜이 다르므로) 한다고한다.

 

해결 1: node.js 와 npm을 이용해 http-server를 이용해 실행한다.

해결 2: 모듈의 사용을 포기하고 일반적인 js를 사용한다.

 

팀원들과의 상의결과, 당장 새로운 툴을 사용하지 않고, 더 간단한 해결방법이며, 현재 FE의 js 코드가 크게 부담이 될 만큼 많지 않으므로 해결2를 선택하기로 하였다. 또한 필요에 따라 파일을 분리하여 사용하기로 하였다.