"URL" not allowed by Access-Control-Allow-Origin

jQuery의 Ajax로 post로 날릴 때 

XMLHttpRequest cannot load ...."URL" not allowed by Access-Control-Allow-Origin 

이라는 에러가 나는 건 간단히 말하면 크로스브라우징 에러이다.

참조 : http://blog.iolo.pe.kr/category/hacking/web

Ajax에는 Same Origin Policy라는 원칙이 있다. 말 그대로, 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청을 보낼 수 있다.

MS가 XMLHttpRequest를 처음 만들 때만 해도 이런 제약은 당연한 것처럼 보였지만, 지금에 와서는 OpenAPI를 통한 매시업(Mashup)이 활성화되는 데 가장 큰 장애물이 되었다. 매시업이 아니더라도 여러 개의 도메인을 사용해야 하는 대규모 사이트를 개발할 때도 골치거리였다. Same Origin Policy를 우회하는 방법으로 JSONP, IFRAME IO, CrossDomain Proxy 등이 고안되었지만, 보안성이 취약하다거나, 동기 호출이 안되거나, 주고 받는 데이터 형식이 제한되거나, 직관적이지 못하거나(dirty hack), ... 등의 문제점 때문에 표준화되기엔 무리가 있었다.

(중략) 한 참 뒤에야 W3C는 (MS의 IE가 제공하는 방식을 수용하여) 크로스도메인간에도 Ajax요청을 주고 받을 수 있는 방법을 표준화 했는데, 그것이 바로 CORS다.

CORS를 한 마디로 요약하면, "요청을 받은 웹서버가 허락하면 크로스도메인이라도 Ajax로 통신할 수 있다"라는 정책이다. 기술적으로는 크로스도메인에 위치한 웹서버가 응답에 적절한 Access-Control-Allow-류의 헤더를 보냄으로써 크로스도메인 Ajax를 허용 수 있다

헤서 자신의 도메인과 post로 날리는 url이 같은지 확인해보면 알 수 있다.

만약 크로스브라우징을 지원해야 할 경우는

아래처럼 요청을 하면 되며

$.ajax({

    url: 'https://www.googleapis.com/moderator/v1/series?key='+key,

    data: myData,

    type: 'GET',

    crossDomain: true,

    dataType: 'jsonp',

    jsonp : 'callback',

    success: function() { alert("Success"); },

    error: function() { alert('Failed!'); },

    beforeSend: setHeader

});

받는 형태는 아래형태여야만 한다.

callback({"key1" : "value1",  "key2" : "value2"});