CORS란

CORS란 Cross Origin Resource Sharing 의 줄임말로 Cross-site Http Request를 가능하게 하는 표준 규약 이다. HTTP 요청은 기본적으로 Cross-Site Http Requests 가 가능하지만 자바스크립트 (XMLHttpRequest)로 다른 웹페이지에 접근할 때는 Same Origin Policy 로 인해 요청이 불가능하다.즉, 자바스크립트 내에서 발생하는 Cross-Site Http Requests는 프로토콜, 호스트, 포트 가 같아야지 요청이 가능하다. 더 쉽게 말하면 웹페이지의 스크립트는 그 페이지와 같은 서버에 있는 주소로만 ajax 요청이 가능하다.

즉, 자바스크립트 내에서 발생하는 Cross-Site Http Requests는 프로토콜, 호스트, 포트 가 같아야지 요청이 가능하다. 더 쉽게 말하면 웹페이지의 스크립트는 그 페이지와 같은 서버에 있는 주소로만 ajax 요청이 가능하다.

 

============================================================================

 

아직 CORS에 대해 읽어봐도 무슨 말인지 모르겠다.. 그냥 로컬에서fetch(비동기식 기술로) API를 불러올시 보안상 이유로 아래와 같은 CORS Error발생한다는 정도 정도...

 해당 이슈를 해결할려고 반나절 이상 구글링을 해보았는데 답이 나오지 않았다.. 결국 선생님한테 물어보았는데

fetch를 로컬에서 실행시킬시 각 브라우저 마다 CORS를 Enabled시켜주는 플러그인을 설치해야 한다고 한다.

 

그래서 Chorm에 해당 플러그인 설치 했다. (cors setting in chrome 구글 검색하면 프러그인 설치 가능)

플러그인 설치시 Chorm 오른쪽 주소창에 아이콘이 하나 생기는데 클릭해서 스위치를 on 시켜주면 끗.