[Same-Origin Policy] Local 환경에서 CORS policy 에러 해결하기

상황은 이러했다.

서비스 구축이 우선이었기 때문에 관리자용 페이지가 아직은 마련되지 않았다.

일일이 API를 호출해서 향후 Admin Site에서 입력하게 될 필요한 정보들을 추가할 수도 있었지만, 사용성을 높이고 팀 내 개발자들과 기획자들 모두가 사용할 수 있게끔 HTML로 임시 페이지를 만들어두는 것이 좋을 것이라 생각했다.

위의 에러 메시지는 블로그를 작성하기 위해 임시로 만든 파일이고, 경로이기 때문에 콘솔의 에러 메시지 경로이지만..

작성한 html 파일을 로컬에서 Chrome 브라우져로 실행을 시키니, CORS 관련 에러가 나타나면서

static한 html 파일의 형태만 그려지고, 아무런 동작이 되지 않았다.

 

에러가 발생한 이유는?  Same Origin Policy

구글에서 위와 같은 에러 메시지를 검색하여 나온 Stack Overflow의 결과들을 종합해보니 다음과 같은 결론을 얻을 수 있었다.

 

일반 스크립트와 달리 ES6 Module은 Same-Origin Policy(동일 출처 정책)가 적용된다.

즉, CORS Header가 없다면 Cross-Origin 또는 File System에 접근할 수 없다. 하지만 문제는 로컬 파일의 경우 CORS Header를 설정할 수 없다.

* Same Origin Policy

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

* CORS(Cross-Origin Resource Sharing)

CORS(교차 출처 리소스 공유)는 HTTP Header를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제를 말한다.

Web Application은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

 

일반적으로 브라우저는 스크립트에서 시작한 Cross-Origin HTTP Request를 보안 상의 이슈로 제한한다.

다른 출처의 리소스를 사용하기 위해서는 그 출처에서 올바른 CORS Header를 포함한 응답을 반환해야 한다.

 

Local에서 Same Origin Policy 에러가 발생하는 이유

html에서 JavaScript로 작성한 모듈 파일을 load하기 위하여 아래와 같은 방식으로 해당 모듈을 불러왔다.

<script type="module" src="./app.js"></script>

위와 같이 type="module"을 사용하였는데, 이 경우 HTML 파일을 로컬에서 load할 경우, JavaScript 모듈 보안 요구사항에 따라서 CORS 오류가 발생한다.

그렇기 때문에 API 호출(Axios/Ajax)이 없는 단순 HTML 파일을 실행시킨 경우에도 CORS 오류가 발생한 것이다.

 

만약에 모듈 보안 요구사항이 있었다면,

HTML과 app.js 모듈을 실행시킬 때 Cross-Origin이 아닌 "동일 출처"가 확인된다면 CORS 오류가 발생하지 않아야되는 것이 아닐까?

 

이에 대한 답은 첫 부분의 에러 메시지에서 파악할 수 있다.(에러가 발생한다면 에러 message와 에러 stack을 꼼꼼히 보는 것이 중요하다.)

origin 'null' has been blocked by CORS policy

origin 'null' has been blocked by CORS policy

실제로 Network 탭에서 확인해보면, app.js에 대한 요청 시 Origin(출처)가 null로 셋팅 되어 있다.

이것은 브라우저가 웹에서 로컬 파일에 접근하지 못하도록 하기 위하여 로컬 파일을 실행시킬 경우 Origin을 null처리 하는 것이다.

---

기존에 작성했던 임시 html 파일은 html 파일 내부에 JavaScript 파일을 작성하여 외부의 API 호출이라던가 필요한 로직을 추가하였다.

이 경우 실행시킨 html 자체에 해당 함수들이 포함되기 때문에 위와 같은 Origin(출처) 이슈가 따로 없었던 것이다.

 

위의 해결 방법은 간단하다.

Local Server를 실행시키고, Local Server에서 html 파일을 실행시킨다면 위의 이슈에서와 같이 누락된 Origin이 추가되기 때문에 정상적인 동작이 가능할 것이다.