Jsonp 로 Cross Domain 통신 시

Post 통신으로 데이터를 넘기고 싶을 때,


data 값에 String 값으로 세팅하여 값을 넘긴다.


ex)

$.ajax({

url: url,

method: "POST",

dataType: 'jsonp',

jsonp: "callback",

data: 'locale=KR&' +

 'language=ko&' + 

 'deviceCode=TEST-K100&' + 

 'salesCode=TESTK100',

success: function (data, textStatus, jqXHR) {

console.log('success.');

},

error: function (jqXHR, textStatus, errorThrown) {

console.log('error: ', jqXHR);

}

});

'Client Standard > Ajax' 카테고리의 다른 글

[Ajax] Http/Https 크로스도메인 문제  (0) 2017.03.27
[AJAX] DB 데이터 받아오기  (0) 2015.07.29
Js, Ajax Example  (0) 2013.02.23

사용자 개인 정보를 서버에 전송할 때 HTTPS로 적용해 달라는 요청이 들어온 적이 있었다.

그래서 주민등록번호나 회원 아이디, 패스워드 등을 서버로 전송하는 페이지에 한해서 HTTPS로 적용되게 URL을 변경하였다.


헌데, 다음과 같은 문제가 발생하였다.

1. 회원 약관 페이지 접근 http://test.co.kr/userAgreement.do

2. 약관 페이지에서 회원 정보 입력 페이지 이동 https://test.co.kr/userReg.do

3. 회원 정보 입력 페이지에서 휴대폰 인증 버튼 클릭 시 ajax로 http://test.co.kr/userAuthMobilePhone.do 요청


위와 같이 휴대폰 인증 버튼 클릭 시 서버로 요청을 보내지도 못하고, ajax 에러 메시지가 출력된다.

error, No Transport


에러 메시지가 출력되는 원인은 회원 정보 입력 페이지 접근 시에는 HTTPS 프로토콜로 접근하였지만 휴대폰 인증 시에는 HTTP로 요청을 보냈기 때문이다.

ajax에서는 HTTPS, HTTP도 크로스 도메인으로 구분하기 때문이다.


지금까지 크로스 도메인 문제는 메인 도메인과 서브 도메인, 도메인은 같지만 포트 번호가 다를 경우에만 해당 되는 줄 알았다.

허나 ajax는 프로토콜이 서로 다를 경우에도 크로스 도메인으로 구분한다.


결국 위의 문제는 휴대폰 인증 시에도 HTTPS로 요청을 보낼 수 있도록 수정하여 문제를 해결하였다.

또 다른 해결 방법은 JSONP를 이용하는 것이 있지만 굳이 쓸 이유가 없어서 적용해 보진 않았다.





[2016-05-11]

https 사이트에서 jsonp를 이용하면 http 사이트로 호출할 수 있다고 생각했는데 아니였다. (3년 전에 정리했던 내용인데 잘못 알고 있었음)

This request has been blocked; the content must be served over HTTPS. 와 같은 에러 메세지가 나오면서 브라우저에서 연동을 차단한다.

여하튼 다음번에는 이런 오류를 범하지 않기 위해 다시 한번 간략하게 정리를 해본다.

http -> https 호출 가능

https -> http 호출 불가능

다른 도메인으로의 호출은 가능 (프로토콜에 상관 없이 모두 가능)


결론은 jsonp를 이용했을 때 https에서 http로의 호출을 제외하곤 모두 연동 가능하다는 것이다.


'Client Standard > Ajax' 카테고리의 다른 글

[Jsonp] POST method 데이터전송  (0) 2017.03.30
[AJAX] DB 데이터 받아오기  (0) 2015.07.29
Js, Ajax Example  (0) 2013.02.23

<main.jsp> (꼭 jsp로 작업하지 않아도 된다.)


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">


var xhr = null;

function getXMLHttpRequest() {

if (window.ActiveXObject) {

try {

return new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

try {

return new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

return null;

}

}

} else if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else {

return null;

}

}


function requestHello(URL) {

param = f.name.value;

URL = URL + "?name=" + encodeURIComponent(param);

xhr = getXMLHttpRequest();

xhr.onreadystatechange = responseHello;

xhr.open("GET", URL, true);

xhr.send(null);

}

function responseHello(){

if(xhr.readyState == 4){

var str = xhr.responseText;

document.getElementById("message").innerHTML = str;

}else{

alert(!"Fail : "+httpRequest.status);

}

}

</script>

</head>

<body>

<form name="f">

<input type="text" name="name">

<input type="button" value="입력 " onclick="requestHello('hello.jsp')">

</form>

<div id="message"></div>


</body>

</html>



------------------------------------------------------------------


<hello.jsp>


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<%

request.setCharacterEncoding("UTF-8");

String name = request.getParameter("name");

%>

안녕하세요, <%=name %> 회원님!

</body>

</html>




================================================================================================




저렇게만 한다면 분명히 한글이 깨질 것이다.


 이 부분을 -> main.jsp : escape(encodeURIComponent(param))

hello.jsp :  java.net.URLDecoder.decode(request.getParameter("name"),"utf-8")


이렇게 다시 바꾸고 실행해보자.

그럼 한글이 제대로 나온다.


그래도 한글이 깨져서 나온다면 잘 저장하고 tomcat 을 restart 하면 된다.


'Client Standard > Ajax' 카테고리의 다른 글

[Jsonp] POST method 데이터전송  (0) 2017.03.30
[Ajax] Http/Https 크로스도메인 문제  (0) 2017.03.27
Js, Ajax Example  (0) 2013.02.23

Js event 예제

testjs11_event2.html



Ajax xml 파싱 예제

js_ajax.html

test.xml



'Client Standard > Ajax' 카테고리의 다른 글

[Jsonp] POST method 데이터전송  (0) 2017.03.30
[Ajax] Http/Https 크로스도메인 문제  (0) 2017.03.27
[AJAX] DB 데이터 받아오기  (0) 2015.07.29

+ Recent posts