CORS policy와 Import/Export

문제의 발생..

github Links

NomadCoders의 side-projects 모임에서(매주 간단한 side-projects과제를 받고 코딩하는 모임) Collor Palette를 제작할 때였다. github-pages를 이용해 보기 위해 정적인 웹페이지를 만들기로 하고 COLOR.js에 있는 변수명을 Import 하려고 하자 문제가 발생했다.

 

문제1

Uncaught SyntaxError: Cannot use import statement outside a module

script의 type을 module로 설정 해야지만 import를 사용할 수 있다는 Error였다.

 

Module?

기본적으로 JavaScript 파일을 담고있는 파일이지만, 일반 JavaScript 파일과 다른 차이점을 가지고 있다고 한다. (웹의 크기가 커지면서 파일을 여러개로 분리할때, 나눠지는 파일을 Module 이라고 부른다)

1. import, export 명령어 사용 가능
2. 엄격 모드로 동작
3. 모듈 가장 바깥쪽에 선언된 변수는 전역이 아닌 모듈 스코프에서 선언된다.

엄격모드?

1. 기존에 무시되던 에러들을 throwing 한다.
2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다. (비-엄격모드, sloppy mode 보다 더 빨리 작동한다.

모듈 스코프?

기존의 Javascript에서 가장 바깥 스코프에서 이름을 선언하면 전역 스코프 였다면, module에서는 모듈 스코프로 선언된다. (export하지 않으면 모듈 내부에서만 접근이 가능하다.)

 

문제2

어찌저찌.. script를 module 타입으로 정의하면서 문제를 해결했지만, 곧바로 새로운 Error가 등장했다.

Access to script at ‘•••/index.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

CORS policy?

Cross-Origin Resource Sharing 의 줄임말로 “교차 출처” 즉, “다른 출처” 에 대해 말하는 것이다. 여기서 말하는 출처란? URL 에서 Protocol과 Host 그리고 보통 숨겨져있는 PORT까지 합친 것을 의미한다.

SOP!

Same-Origin Policy의 줄임말. “같은 출처에서만 리소스를 공유할 수 있다”는 규칙이다. 모든 다른 출처를 통제할 수 는 없기에 CORS정책은 예외로 허용하게 된다.

CORS 의 동작 과정

1. Client엣 HTTP Request Header 에 Origin을 담아 전달한다.
2. Server는 Response Header에 Access-Control-Allow-Origin을 전달한다.
3. Client에서는 Origin과 받은 Access…Origin을 비교한다.

그렇다면 왜? Error?

이유에 대해서 두가지가 있다.

1. Script type=”module”은 로컬에서 실행시 자바스크립트 모듈 보안 요구로 인해 CORS 에러가 발생한다.
2. 로컬 시스템에서 로컬 파일 리소스를 요청할때 origin이 null로 넘어가기 떄문에 CORS에러가 발생한다.

 

마무리하며..

정말 쉽게 생각하고 나를 막을 수 있는건 오타밖에 없을 것 이라고 생각했다. React와 Node.js를 공부하면서 막히고 고민하는 것은 있었지만 오래간만에 JavaScript에서 막히면서 다시 검색해보고 공부해보게 되었다.

아직 모르는게 너무 많고 갈길이 멀어보이기도 하면서,

별거 아닌 프로젝트지만 시작해보길 잘했다는 생각이 들었다.

 

 

 

참조

Module https://helloworldjavascript.net/pages/293-module.html

CORS policy#1 https://evan-moon.github.io/2020/05/21/about-cors/

CORS policy#2 https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu