이제 프로젝트 개인 파트들을 전부 merge 시키고 확인하는 과정에서 CORS policy 에러가 발생했는데
'script type=module'의 특성
먼저 MDN의 javascript modules에 관한 설명에 따르면 문제가 된 부분같이 type을 module로 설정한 script 태그가 포함된 HTML 파일을 로컬에서 로드할 경우 자바스크립트 모듈 보안 요구사항으로 인해 CORS 오류가 발생한다고 합니다. 그 때문에 ajax로 요청한 것임 아님에도 불구하고 CORS 오류가 발생했던 것이죠.
브라우저는 (브라우저 별로 약간은 상이하지만) 웹에서 로컬 파일에 접근하지 못하도록 하기 위해 이런 식의 방법을 사용한다고 합니다.
이 문제에 대한 해결 방법은 npm에서 http-server를 사용하거나 vscode의 live server를 이용해서 회피가 가능한데, 여태까지 live server로 돌리고 있어서 발견하지 못한 것이었다.
어차피 나중에는 서버 단에 리소스를 올려서 상관없겠지만 로컬 저장소를 이용함에 따라 CORS 정책 문제로 인한 에러가 날 줄은 몰랐다.
일단 필수 기능 구현은 전부 완료하고 추가 기능 구현으로 key값 입력을 통한 관리자 모드와 관리자 모드에서의 CRUD 구현 등을 진행 중이다.
안녕하세요, 고재영입니다. 언제나 즐겁게 살려고 노력합니다.