Ajax jsonp OR 서버측에서 크로스도메인 허용 방법

---

$.ajax() 같은 ajax 관련 함수를 호출할 때 타겟이 되는 URL이 클라이언트와 다른 도메인이면 호출이 안 된다.

 

가령 http://a.abc.com/first.jsp 에서 ajax로 http://x.xyz.com/api/getme 라는 API를 호출할 수는 없다는 말이다.

 

이는 Same Origin Policy 라는 ajax의 원칙 때문으로, 현재 브라우저에 보여지는 HTML을 내려준 서버에게만 ajax 요청을 할 수 있다는 말이 되겠다. 

 

위와 같이 불가한 호출을 하고 크롬에서 F12를 눌러 에러메시지를 보면,

 

XMLHttpRequest cannot load http://x.xyz.com/api/getme. Origin http://a.abc.com is not allowed by Access-Control-Allow-Origin.

 

이라는 문구가 뜨는 걸 볼 수 있다. 

 

이를 해결하는 방법이 있다.

 

1. json 대신 jsonp 타입을 사용한다.

 

1. $.ajax({
2.    type : "get",
3.    url : "http://...",
4.    dataType : "jsonp",
5.    success : ...,
6.    error : ...
7. });

이때 중요한 것은 type을 get으로 해야 한다는 것이다.

jsonp는 post를 지원하지 않고 get만 가능하기 때문이다. (post로 해 놔도 호출시점에 get으로 바뀐다)

물론 서비스를 제공하는 서버 측에서 해당 api가 get으로 호출가능하도록 되어있어야 한다.

AJAX에서 JSONP 안 쓰고 cross-domain 호출하기

2. CORS 라는 방법을 사용하는 것이다. 이것은 클라이언트가 아닌 서버 측에서 설정해 줘야 하는 것이다.

   즉 다른 도메인과도 ajax 통신을 할 수 있도록 서버에 설정하는 것이다.

   관련 포스팅 (http://iolothebard.tistory.com/494)

---