[Javascript] Ajax CrossOrign 문제

CORS(Cross Origin Resource Sharing) 문제때문에 한참 삽질을 한적이 있었다. 

 

외부 url을 ajax로 호출해서 작업해야 하는데 CORS에 걸려서 막막한 상황😐

 

CORS 에러가 나올때는 다음 같은 상황이 있다.

 

- 다른 도메인에서 데이터를 가져올 때

- http에서 https로 데이터를 가져올 때

 

이전에도 비슷한 경험이 있었는데 그때는 서버단에서 RestTemplate를 이용해

 

스크립트가 아닌 서버단에서 호출한 뒤 다시 데이터를 뿌려주게 끔 작업했었다.

 

이번엔 그렇게 작업하기가 까다로워서 다른 방법이 없을까 찾아보던 도중 신박한 플러그인을 발견했다.

 

http://www.ajax-cross-origin.com/

Ajax Cross Origin - jQuery plugin

 

jQuery 기반의 플러그인인데 코드 한줄로 CORS 이슈를 해결해준다..!

 

먼저 해당 js파일을 내려 받은 뒤 프로젝트 폴더에 넣고 불러와 준다.

 

<!--	cross origin	-->
<script type="text/javascript" src="/js/jquery.ajax-cross-origin.min.js"></script>

 

 

그리고 ajax 호출 시 crossOrigin 옵션을  true로 호출해주면 끝!

 

 

$.ajax({
			crossOrigin : true,
			url: "http://요청하고자하는 url",
			dataType: "json",
			success: function (data) {
				
                // 성공 했을 때 처리

			},
			error: function (request, status, error) {
				
                // 실패 했을 때 처리
                
			}
		});

 

서버단이 아닌 스크립트로 이렇게 처리하는 방법이 있어서 너무 편했다👍