No 'Access-Control-Allow-Origin' header is present on the requested resource

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

ajax에는 Same Origin Policy라는 원칙이 있다고 한다.

현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버에서만 ajax요청을 보낼 수 있다고 한다. -_-

보안상 당연한 문제일 수도 있지만

로컬에서 개발하고 원격지 어딘가에 띄워져 있는 서버에 http 요청을 해서 데이터를 가져 오려고 하면 어김없이 실패하고 만다.

CROSS DOMAIN 문제다.

cross domain을 해결하는 방법으로 여러가지 대안이 제시되어 왔다.

JSONP, IFRAME IO, CrossDomain Proxy

여러가지 대안이 있었지만 추후에 W3C에서 표준화를 진행하였고 그래서 등장한 개념이 CORS (http://www.w3.org/TR/cors/)

CORS(Cross-Origin Resource Sharing)

서버에서 허락해주면 cross domain도 ajax통신을 할 수 있도록 해주는 것이다.

서버에서 허락해 줘야 한다는 점이 장점이 될 수도, 단점이 될 수도 있지만

서버와 클라이언트를 동시에 개발하고 있다면 오히려 장점이 될 수도 있겠다.

하지만 OpenApi를 사용하고 있는 입장이라면 서버쪽에서 허락해 주지 않는이상 cross domain 문제를 해결하려면 다른 방법을 찾아야 하겠다.

(왠만한 OpenApi는 CORS를 적용하고 있지 않을까?)

HttpResponse Header에 단순히 한 줄 정도만 추가하는것으로 서버쪽 작업은 간단히 끝낼 수 있다.

response.addHeader("Access-Control-Allow-Origin", "*");

Access-Control-Allow-Origin 모든 접속을 허락해 주는 것이다.

결과는 위와 같이 정상적으로 Object를 가져오는걸로 확인 할 수 있다.

출처 : http://noviceany.tistory.com/22