CORS 오류

CORS

CORS는 Cross Origin Resourcs Sharing의 약자로 웹 브라우저에서 실행되는 웹 애플리케이션에서 다른 도메인에서 리소스를 요청할 때 발생하는 보안 정책을 말합니다. 쉽게 말하면 교차 출처 리소스 공유 정책이라고 하며 다른 출처를 의미하는 것으로 말할 수 있다.

웹 보안을 강화하기 위해 도입된 cors 정책은 웹 페이지 에서 스크립트로 다른 도메인 데이터를 요청할 때 발생하는 보안 문제를 제어하고 방지하기 위해 사용됩니다.

CORS 정책

웹 브라우저의 동일 출처 정책을 보완합니다. 동일 출처 정책은 웹페이지가 자신의 출처에만 데이터를 요청할 수 있도록 제한하는 보안 메커니즘입니다. 이러한 정책 때문에 다른 도메인의 리소스를 불러오는 것이 제한되지만, 일부 상황에서는 다른 도메인의 리소스를 필요로 하는 경우도 있습니다.

EX) 웹 애플리케이션에서 외부 API로 데이터를 요청하는 경우 CORS 정책을 준수해야 합니다.

CORS는 웹 서버에서 발생하며, 서버는 요청이 허용되는 출처와 요청이 어떤 HTTP메서드와 헤더를 사용할 수 있는지 설정합니다. 이러한 설정을 통해 브라우저는 요청을 허용하거나 거부하며, 요청이 허용되면 데이터를 안전하게 교환할 수 있습니다.

CORS 정책을 구현하려면 웹 서버의 설정 파일에서 특정 도메인에서의 요청을 허용하는 규칙을 추가하거나, 프로그램 방식으로 CORS 관련 헤더를 설정해야 합니다. 이를 통해 웹 애플리케이션은 다른 도메인에서 데이터를 안전하게 요청하고 교환할 수 있습니다.

 

해결 방법

• Chrome 속성에서 대상 수정
• http 서버를 구축하는 방법

 

첫 번째(Chrom 속성 대상 수정)

Chrom의 속성에 들어가 대상(t) 파일의 주소를 (disable-web-security --disable-gpu --user-data-dir=~/tmp) 추가해주고 Chrom을 관리자 모드로 실행하면 CORS 오류 없이 실행 가능 합니다.

"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/tmp

두 번째( html 서버 구축)

npm install http-server -g  (httP서버를 설치 해줍니다.)

서버가 설치가 완료되었다면

npx http-server

서버를 실행해 주면 CORS오류 없이 사용 가능합니다!!

 

 

 

 

참고) https://fl0wering.tistory.com/65