javascript/jquery - jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제
이 름 : 바다아이
|
조회수 : 8397
짧은 주소 : https://www.bada-ie.com/su/?371591784104
자바 스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한합니다.
이 정책을 동일근원정책(Same-Origin Policy, SOP) 정책이라고 하며,
이러한 정책으로 인해 생기는 이슈를 cross-domain 문제라고 합니다.
근데 우리가 오픈 api 개발하다보면 반드시 다른 도메인으로 ajax 를 실행해야 하는 경우가 생깁니다.
이때 우리는 JSONP(JSON with Padding) 를 이용해 우회하여 꼼수를 쓰게 됩니다.
아래는 간단한 예제입니다. 방법만 알면 알아서 고쳐서 사용하시면 되겠습니다.
ajax 옵션들은 뭐.. 편한대로 알아서 ^^;
클라이언트
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var dArray = null;
$.ajax({
url: "http://localhost/sitemap.xml?id=ddd&name=ccc&callback=?",
dataType: "jsonp",
success: function(callback){
dArray = callback;
for (var i = 0; i < dArray.length; i++) {
alert(dArray[i].date);
alert(dArray[i].id);
alert(dArray[i].name);
alert(dArray[i].subject);
alert(dArray[i].content);
}
}, // 상단 선언된 변수에 데이터를 담는다.
error: function(){
alert("error");
}
})
</script>
서버
golang 에서 보면... 결국 get 으로 넘어온 callback 과 아이디, 이름을 일단 변수로 받아놓고
callback 을 붙여서 출력하는 개념입니다.
클라이언트에서 보낸 callback 과 서버에서 나간 callback 이 같아야 꼼수가 통하게 됩니다.
다른 스트립트 언어들도 똑같습니다. 변수 받아서 아래와 같이 callback 다음에 json 형식 붙이고 출력하면 끝입니다.
req 는 *http.Request 입니다.
w 는 http.Response.Writer 입니다.
callback := req.FormValue("callback")
id := req.FormValue("id")
name := req.FormValue("name")
io.WriteString(w,
callback+
`([{"date":"2018-09-12 16:25:08","id":"`+id+`","name":"`+name+`","subject":"제목입니다.","content":"내용입니다."},
{"date":"2018-09-12 16:25:08","id":"2번 아이디","name":"2번 이름","subject":"제목입니다.","content":"내용입니다."}])`)
실제 서버쪽을 찍어보면 json 형태로 아래처럼 출력됩니다.
Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.05821 초 to webmaster... gogo sea. gogo sea.
살인!
javascript/jquery
