액세스 제어를 통해 AngularJS에서 Origin 허용

AngularJS는 단일 페이지 애플리케이션을 구축하기 위한 JavaScript 기반 웹 애플리케이션 프레임워크입니다. 응용 프로그램의 프런트 엔드를 만드는 데 사용되는 구조적 프레임워크입니다.

Access Control Allows Origin 헤더는 콘텐츠에 액세스할 수 있는 도메인을 지정합니다. 기본적으로 AngularJS는 빈 문자열을 값으로 사용하므로 모든 도메인에서 액세스할 수 있습니다.

이 헤더는 리소스에 액세스할 수 있는 도메인을 제한하며 * 및 self라는 두 가지 값을 사용할 수 있습니다. 이 경우 별표(*)는 모든 도메인이 액세스할 수 있음을 의미하고 다른 값 self는 유사한 출처의 페이지만 액세스할 수 있음을 의미합니다.

한마디로 보안 오류입니다. Access Control Allow Origin 헤더가 없으면 브라우저는 리소스 로드를 허용하지 않습니다.

이 보안 오류에 대한 솔루션

이 오류에 대한 해결책을 논의해 보겠습니다.

일반 웹 페이지는 XMLHttpRequest 개체를 사용하여 원격 서버에서 데이터를 송수신할 수 있지만 동일 출처 정책이 이를 제한합니다. 확장 기능은 예전처럼 제한되지 않습니다.

확장이 교차 출처 권한을 요청하면 출처 외부의 서버와 통신할 수 있습니다.

이 오류를 해결하려면 JSONP를 사용할 수 있습니다. 이 기술을 사용하면 페이지에 스크립트 태그를 추가하고 JSON 데이터를 반환하는 서비스 URL을 가리키도록 src 속성을 설정하여 클라이언트에서 서버로 AJAX 요청을 보낼 수 있습니다.

var url = "paste url link here";
$http.jsonp(url)
.success(function(data){
    console.log(data);
});