잠시만 기다려 주세요

HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (888)  |  추천 및 재미 (153)  |  자료실 (20)  |  끄적거림 (520)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2020년 09월 24일
너무 많은 배려를 해주지 말아라... 권리로 착각한다. 입은 닫고 할 일하고 상대가 해야할 일은 조용히 이야기 해 주어라. - 바다아이
 




    javascript/jquery

javascript/jquery - jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제
이 름 : 바다아이   |   조회수 : 2016         짧은 주소 : 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 형태로 아래처럼 출력됩니다.
([{"date":"2018-09-12 16:25:08","id":"","name":"","subject":"제목입니다.","content":"내용입니다."},
	{"date":"2018-09-12 16:25:08","id":"2번 아이디","name":"2번 이름","subject":"제목입니다.","content":"내용입니다."}])
| |


      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
74 javascript/jquery javascript , ... 바다아이 266
73 javascript/jquery , cookie class 바다아이 813
72 javascript/jquery select 3 바다아이 1211
71 javascript/jquery , ... 바다아이 1748
70 javascript/jquery , timezone, , ... moment.js 바다아이 1882
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 1804
68 javascript/jquery (block) , ... 바다아이 1745
67 javascript/jquery textarea cursor , , focus 바다아이 2350
66 javascript/jquery jquery ajax option .... 바다아이 1962
현재글 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 2017
64 javascript/jquery javascript , , , , () 바다아이 2115
63 javascript/jquery javascript (date ) 바다아이 2203
62 javascript/jquery CSS3 javascript 바다아이 2378
61 javascript/jquery javascript , cookie, , , , , 바다아이 2281
60 javascript/jquery javascript 바다아이 2593
59 javascript/jquery javascript / , , , 바다아이 2818
58 javascript/jquery url , , encode, decode ... 바다아이 2095
57 javascript/jquery javascript ... frame location.href 바다아이 2205
56 javascript/jquery File Upload Progress, .... . 바다아이 2548
55 javascript/jquery javascript, json , json Highlight 바다아이 2562
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 2649
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 2391
52 javascript/jquery javascript entity , , encode, decode 바다아이 2694
51 javascript/jquery javascript post, get , 바다아이 3896
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 2768
49 javascript/jquery jquery autocomplete , , . 바다아이 2524
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 2866
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 2623
46 javascript/jquery Javascript event.keyCode , , ACSII 바다아이 2267
45 javascript/jquery url encode decode , , , javascript 바다아이 3474
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : vultr.com 서울  실행시간 : 0.05665
to webmaster... gogo sea. gogo sea.