[TIL] 2024-12-24_미니프로젝트:CORS 에러

미니프로젝트

문제: CORS 정책 에러

<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script type="module" src="js/index.js"></script>

index.html 파일에서 위의 코드와 같이 firebase의 config 값이 있는 script를 index.js 파일로 분리 시도

🚨 origin 'null' has been blocked by CORS 에러

원인

CORS (Cross-origin-resource-sharing)

다른 출처의 리소스 공유 허용/비허용 정책

SOP (Same Origin Policy)

동일 출처 정책
어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저 보안 방식

• 구분 기준: URI의 프로토콜/호스트/포트
  위의 구분 기준이 모두 같으면 같은 출처로 간주한다.

🙋 정책이 필요한 이유?
출처가 다른 두 어플리케이션이 자유로이 소통할 수 있는 환경은 헤커가 CSRF(Cross-Site Request Forgery) 나 XSS(Cross-Site Scripting) 등의 방법을 이용해서 악성 코드를 심어놓고 개인정보를 가로챌 수 있다.

이러한 악의적인 경우를 방지하기 위해 SOP 정책으로 동일하지 않은 다른 출처의 스크립트가 실행되지 않도록 브라우저에서 사전에 방지한다.

🫠 동일 프로토콜 + 호스트 + 포트 에서 로드하지만 에러 발생
<script type="module">이 포함된 html 파일을 로컬에서 로드할 경우 자바스크립트 모듈 보안 요구사항으로 인해 CORS 오류가 발생한다.

• 에러 메세지의 origin 'null'을 확인
  origin(출처) 가 null로 넘어온 script에 대한 접근이 CORS 정책에 따라 제한된다.
  

즉, 클라이언트에서 HTTP 요청 헤더에 Origin 이라는 필드에 출처를 담아서 보내며 이를 브라우저가 확인하는데 이 값이 ‘null’ 이므로 문제가 발생했다!

해결

1. 로컬이 아닌 서버에 올려 프로토콜 + 호스트 + 포트를 같게 만들어준다.

   npm 으로 http-server를 전역으로 설치

   npm install http-server -g

   http-server를 실행시켜 해당 폴더를 서버에 올린다

   http://127.0.0.1:8080

2. 서버를 사용할 수 없는 경우, Chrome 확장 프로그램 이용

   https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

분석

1. <script type=module>은 로컬에서 실행 시 자바스크립트 모듈 보안 요구로 CORS 에러가 발생한다.
2. 로컬시스템에서 로컬 파일 리소스를 요청할 때는 origin(출처)이 null로 넘어가기 때문에 CORS 에러가 발생한다.

💭 임시로 로컬 서버를 띄워서 문제를 해결했지만 github page 배포까지 했을 때 어떻게 동작할 지 확인되지 않아 페이지 병합 이후 재테스트가 필요하다.

⭐️ 참고자료
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
로컬에서 CORS policy 관련 에러가 발생하는 이유

---

📝 TO-DO

1. 미니 프로젝트 소스 정리
2. css 디자인 정리

💭 Diary

오늘 팀원들과 본격적으로 프로젝트 개발을 시작하면서 멋진 깃 그래프가 완성되었다...👍 (재봉틀 머지 머신)
초반에 소스 병합 미숙과 CORS 에러에 시간을 많이 소모했지만 뒷작업을 깔끔하게 하면 멋진 프로젝트가 완성될 것 같다.