자바스크립트 브라우저의 CORS (Cross-Origin Resource Sharing)란 무엇인가?

Photo of author

By tutor

자바스크립트 브라우저의 CORS (Cross-Origin Resource Sharing)란 무엇인가?

자바스크립트 브라우저의 CORS (Cross-Origin Resource Sharing)란 무엇인가?

 

자바스크립트 브라우저의 CORS(Cross-Origin Resource Sharing)란?

CORS란?

CORS는 Cross-Origin Resource Sharing의 약자로, 웹 페이지에서 다른 출처의 자원을 사용하는 것을 허용하는 보안 방식입니다. 즉, 브라우저에서 실행되는 자바스크립트 코드로 다른 출처의 자원에 접근할 때 발생할 수 있는 보안 문제를 처리하기 위한 기술입니다.

CORS의 작동 방식

브라우저에서는 서로 다른 출처의 자원에 접근하는 요청을 보낼 때, 상태 코드 200 이외의 코드(예: 404, 500 등)가 반환될 경우, 브라우저는 보안상의 이유로 해당 자원의 데이터를 사용하지 않고 요청을 차단합니다. 그러나 서로 다른 출처간에 정보를 공유해야 할 때도 있기 때문에 CORS를 이용해 이러한 요청이 가능하도록 허용합니다.

CORS의 구현 방법

CORS는 브라우저 측의 구현 방식이기 때문에 서버 측에서는 특별한 처리를 하지 않아도 됩니다. 자바스크립트에서는 `XMLHttpRequest` 객체를 이용해 서버와 통신을 할 때, `withCredentials` 속성을 이용하면 원하는 도메인에서 자원을 가져올 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://www.example.com/data', true);
xhr.send();

결론

CORS는 서로 다른 출처의 자원을 사용할 수 있도록 하는 브라우저의 보안 방식입니다. 자바스크립트에서 서로 다른 출처의 자원을 사용하려면, `XMLHttpRequest` 객체에서 `withCredentials` 속성을 `true`로 설정하여 CORS를 활성화할 수 있습니다.

최대 100단어: CORS는 브라우저에서 자원 접근 시 보안적 이슈를 해결하는 것이며, 서로 다른 출처의 자원 공유를 가능하게 합니다. 자바스크립트에서 `XMLHttpRequest` 객체에서 `withCredentials` 속성을 `true`로 설정하여 CORS를 활성화할 수 있습니다.