CORS policy 교차 출처 리소스 공유

SOP(Same-Origin Policy) ->(child) CORS

 

Cross-origin resource sharing(CORS)은 웹페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할수 있게 허용하는 구조이다. 이미지, 스타일시트, 스크립트, iframe, 동영상을 유롭게 임베드 할 수 있다.

 

다만 특정 도메인간의 요청은 금지된다.(Ajax요청)

 

교차 출처 요청을 허용하는 것이 안전한가를 판별하기 위해 서버와 브라우저가 상호통신하는 하나의 방법을 정의한다.

- 출처 위키백과

나의 경우

index.html:1 Access to script at 'file:///Users/...' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:11          GET file:///Users/... net::ERR_FAILED

와 같은 오류가 콘솔에 나타났는데 CORS 정책에 의해 오류가 나타났다.

 

나는 라이브러리의 모듈 중 한가지만 가져다 쓰고 싶어서 한가지 파일만 따로 복사본을 만들어서 저장해두고 불러오기를 시도했다가

위와 같은 오류가 났다.

 

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

 

오리진의 'null'이 CORS규칙에 의해 막혔다. orgin의 요청은 프로토콜의 scheme (HTTP,Data,크롬, 크롬-확장, https) 만 지원한다.

 

해결

https://stackoverflow.com/questions/61191061/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module

Uncaught SyntaxError: Cannot use import statement outside a module