크롬 크로스도메인 이슈 CORS 간단히 해결하는 방법

 

크롬 크로스도메인 이슈 CORS 간단히 해결하는 방법

 

크로스도메인이란?

보안상의 이유로 웹 페이지에서는 같은 도메인 상의 요청만 가능하게 됩니다.

이러한 정책을 Same Origin Policy 이라하며 동일한 도메인으로 HTTP 요청을 보내는 것만 가능한 정책을 말합니다.

 

하지만 이는 웹 개발자들을 귀찮게 만드는 것이죠. 그래서 나온 것이 CORS(Cross-Origin Resource Sharing) 입니다.

다른 도메인에서의 요청도 수락하게 하는 것이죠.

 

Cross-Origin Resource Sharing 표준은 웹 브라우저가 사용하는 정보를 읽을 수 있도록 허가된 출처 집합를 서버에게 알려주도록 허용하는 HTTP 헤더를 추가함으로써 동작합니다. 추가적으로, 사용자 데이터 상에서 부수 효과를 일으킬 수 있는 HTTP 요청 메서드에 대해(특히, GET 이외의 HTTP 메서드들 혹은 어떤 MIME 타입을 사용하는 POST 사용에 대해), 스펙은 브라우저가 요청을 "preflight"(사전 전달)하도록 강제하는데, 이는 HTTP OPTION 요청 메서드를 이용해 서버로부터 지원 중인 메서드들을 내려 받은 뒤, 서버에서 "approval"(승인) 시에 실제 HTTP 요청 메서드를 이용해 실제 요청을 전송하는 것을 말합니다. 서버들은 또한 클라이언트에게 (Cookie와 HTTP Authentication 데이터를 포함하는) "credentials"가 요청과 함께 전송되어야 하는지를 알려줄 수도 있습니다.

 

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS

 

IE에서는 crossdomain.xml 파일 설정이라든가 (구글링 하면 많이 나오는) 몇가지 방법이 존재합니다.

 

하지만 크롬에서는 크롬 애플리케이션을 받으면 간단하게 Crossdomain 문제를 해결 할 수 있죠.

그럼 그 방법에 대해서 알아보도록 하겠습니다.

 

우선 크로스도메인 설정을 하지 않았을 때 발생하는 에러를 보도록 하죠.

 

[IE에서의 오류]

 

[크롬에서의 오류]

이처럼 엑세스 오류가 발생하게 되죠.

Request header field AJAX is not allowed by Access-Control-Allow-Headers is preflight response.

네트워크 오류 엑세스가 거부되었습니다.

 

위에서 말한대로 크롬에서 간단히 애플리케이션을 받아 해결 하는 방법을 보도록 하겠습니다.

크롬 웹스토어로 이동합니다.

 

Link : https://chrome.google.com/webstore

 

 

웹스토어로 이동하셔서 cors로 검색합니다.

 

 

그럼 위와 같이 검색이되며 CORS Enabler를 다운 받으시면 됩니다.

 

이제 크롬의 우측 상단을 보시면 아래와 같이 아이콘이 생성됩니다.

 

CORS 활성화는 초록색, 비활성화는 빨강색으로 표출되며

활성화된 상태에서는 Cross domain이 가능하게 됩니다.