Ajax 크로스 도 메 인 문제 해결 방법 집계 (추천)

이 편 은 작은 흰색 이 크로스 필드 에 부 딪 혀 크로스 필드 문제 인지 모 르 는 것 부터 크로스 필드 문제 인지 모 르 는 것 까지 어떻게 해결 해 야 할 지 모 르 는 것, 그리고 크로스 필드 문 제 를 해결 하 는 두 가지 방법 을 찾 아 ajax 크로스 필드 문 제 를 해결 하 는 전 과정 을 다 룰 것 이다.
크로스 필드 문제 인지 모 르 겠 습 니 다.
그 이 유 는 이 렇 습 니 다. 재 활용 을 위해 중복 개발 을 줄 이기 위해 사용자 권한 관리 시스템 을 따로 개 발 했 고 다른 시스템 에서 인증 과 권한 수여 정 보 를 얻 었 습 니 다. 이 를 A 시스템 이 라 고 부 릅 니 다.A 시스템 을 호출 하여 B 를 예 로 들다.B 시스템 에서 ajax 로 A 시스템 의 인터페이스 (데이터 형식 은 json) 를 호출 합 니 다. 그 때 는 매우 당 혹 스 러 웠 습 니 다. A 시스템 에서 해당 하 는 url 을 방문 하면 json 데 이 터 를 정상적으로 되 돌 릴 수 있 지만 B 시스템 에서 ajax 를 사용 하여 같은 url 을 요청 하면 아무런 반응 이 없 었 습 니 다. 마치 아무 일 도 일어나 지 않 은 것 같 습 니 다.이렇게 반복 적 으로 고 쳐 오랫동안 해결 하지 못 했 기 때문에 동 료 를 구 해 달라 고 부탁 했다. 이것 은 ajax 크로스 도 메 인 문제 일 수도 있다 는 것 을 일 깨 워 주 었 기 때문에 이 문 제 를 크로스 도 메 인 문제 로 해결 했다.
도 메 인 을 뛰 어 넘 을 줄 알 면서 어떻게 해결 해 야 할 지 모르겠다.
문제 의 정확 한 원인 을 알 고 남 은 것 은 문 제 를 해결 할 방법 을 찾 는 것 이다.구 글 은 오랫동안 동료 들 의 조언 을 받 아 jQuery 의 ajax 에 jsonp 라 는 속성 이 있 음 을 알 게 되 었 습 니 다.
해결 방법 을 찾다
이제 크로스 오 버 문 제 를 어떻게 해결 하 는 지 알 게 되 었 고 나머지 는 실현 의 세부 사항 이다.실현 하 는 과정 에서 실 수 는 피 할 수 없다.json 과 jsonp 두 가지 형식의 차 이 를 모 르 고 실 수 를 저 질 렀 기 때문에 구 글 은 오랫동안 해결 되 었 다.
먼저 페이지 에서 jQuery 의 ajax 를 사용 하여 도 메 인 문 제 를 해결 하 는 간단 한 버 전 을 살 펴 보 겠 습 니 다.

$(document).ready(function(){
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false, 
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
}); 

이렇게 쓰 는 것 은 전혀 문제 가 없습니다. 처음에 error 의 처리 함수 중 alert ("error") 일 뿐 입 니 다. 어떤 원인 으로 오류 가 발생 했 는 지 알 기 위해 처리 함 수 를 위의 실현 방식 으로 바 꾸 었 습 니 다.마지막 줄 alert 사용 하기;parsererror。아무리 생각해 도 이해 가 되 지 않 고 구 글 을 계속 하 다 보 니 만능 stackoverflow 에서 답 을 찾 아 이곳 에 연결 되 었 습 니 다.jsonp 의 형식 은 json 형식 과 미세한 차이 가 있 기 때문에 server 엔 드 의 코드 에 있어 서 약간 다르다.
json 과 jsonp 형식의 차 이 를 비교 해 보 세 요.
json 형식:

{
"message":"    ",
"state":"1",
"result":{"name":"   1","id":1,"description":"11"}
} 

jsonp 형식:

callback({
"message":"    ",
"state":"1",
"result":{"name":"   1","id":1,"description":"11"}
}) 

차이 점 을 알 수 있 겠 죠? url 에서 callback 이 백 스테이지 로 전 달 된 인 자 는 신마 callback 이 신마 입 니 다. jsonp 는 json 보다 한 층 더 많 습 니 다. callback ().이렇게 하면 그것 을 어떻게 처리 해 야 할 지 알 수 있다.그래서 배경 코드 를 수정 합 니 다.
배경 자바 코드 는 다음 과 같 습 니 다:

@RequestMapping(value = "/getGroupById")
public String getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "    ", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "    ", Constants.RESULT_FAILED);
}
String json = JsonConverter.bean2Json(result);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(callback + "(" + json + ")");
return null;
} 

검색 결 과 를 제 이 슨 형식 으로 바 꾸 고 인자 콜 백 으로 제 이 슨 밖 에 한 층 더 설치 하면 제 이 슨 p 가 됩 니 다.데이터 형식 을 jsonp 로 지정 한 ajax 는 더 처리 할 수 있 습 니 다.
이렇게 크로스 도 메 인 문 제 를 해 결 했 지만 parsererror 를 일 으 킨 원인 을 돌 이 켜 보 자.json 형식의 데 이 터 를 jsonp 형식의 데이터 로 맹목적 으로 처리 하여 이 오 류 를 일 으 켰 기 때 문 입 니 다. 이때 server 엔 드 코드 는 다음 과 같 습 니 다.

@RequestMapping(value = "/getGroupById")
@ResponseBody
public ReturnObject getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response){
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "    ", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "    ", Constants.RESULT_FAILED);
}
return result;
} 

이로써 ajax 크로스 도 메 인 문 제 를 해결 하 는 첫 번 째 방식 은 일 단락 되 었 다.
해결 방법 을 추가 하 다.
끝 없 는 것 을 추구 합 니 다. 구 글 과정 에서 도 메 인 문 제 를 해결 하 는 jQuery 플러그 인 - jquery - jsonp 를 무심코 발견 하 였 습 니 다.
첫 번 째 방식 의 기초 가 있 습 니 다. jsonp 플러그 인 을 사용 하 는 것 도 간단 합 니 다. server 엔 드 코드 는 변경 할 필요 가 없습니다.
jquery - jsonp 플러그 인 을 사용 하여 크로스 도 메 인 문 제 를 해결 하 는 방법 을 알 아 보 세 요.

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("     :"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
}); 

이로써 두 가지 크로스 오 버 문 제 를 해결 하 는 방식 은 모두 소개 되 었 다.
보충: Ajax 크로스 도 메 인 문 제 는 세 가지 해결 방안 이 있 습 니 다.
1. 중간 과도 층 을 통 해 크로스 도 메 인 문 제 를 해결한다.
(1) 웹 프 록 시 서버 를 통 해 서로 다른 도 메 인 응용 을 프 록 시 서버 를 통 해 통일 적 으로 격 리 시 키 고 모든 응용 은 도 메 인 이름 아래 에 있 습 니 다.(예 를 들 어 apache, nginx 등)
(2) 도 메 인 간 보안 제한 은 모두 브 라 우 저 에서 말 하 는 것 을 말 합 니 다. 서버 엔 드 는 도 메 인 간 보안 제한 이 존재 하지 않 기 때문에 이 컴퓨터 서버 엔 드 를 통 해 httpclient 와 유사 한 방식 으로 '도 메 인 간 접근' 작업 을 완성 합 니 다.
2. 탭 을 통 해 크로스 필드 문 제 를 해결 합 니 다 & lt; /span></p>
<p>주의: "src" 라 는 속성 을 가 진 라벨 은 모두 도 메 인 을 뛰 어 넘 는 능력 을 가지 고 있 습 니 다. 예 를 들 어 & lt;script>、<img>、<iframe><br> </p>
<p>예제: & lt; /p>
<p><strong>프론트 스 크 립 트: & lt; /strong></p>
<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript">
var flightHandler = function(data){
alert ('당신 이 조회 한 항공 편 결 과 는: 요금' + data. price + '위안,' + '여 표' + data. ticket + '장'); & \ # 13;
};
var url = "http://abc.com:8080/AjaxCrossDomain/data/data.jsp?code=CA1998&callback=flightHandler";
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
배경 data. jsp 내용:

jquery 의 jsonp 를 사용 하여 도 메 인 접근 을 실현 합 니 다. 예 는 다음 과 같 습 니 다.

 
$(function(){ 
$.ajax({ 
type: "get", 
async: false, 
url: "http://abc.com:8080/AjaxCrossDomain/jsonp/data.jsp", 
dataType: "jsonp", 
jsonp: "callback", 
jsonpCallback:"flightHandler", 
success: function(json){ 
alert('        ：  ： ' + json.price + '  ，  ： ' + json.tickets + '  。'); 
}, 
error: function(){ 
alert('fail'); 
} 
}); 
});