Ajax 도메인 간 요청을 사용하는 방법

이번에는 Ajax 크로스 도메인 요청을 사용하는 방법과 Ajax 크로스 도메인 요청을 사용할 때 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

이 기사에서는 교차 도메인 문제를 겪었지만 그것이 교차 도메인 문제인지 몰랐고, 교차 도메인 문제인 것을 알았지만 해결 방법을 몰랐던 초보자의 이야기를 들려줄 것입니다. 그런 다음 크로스 도메인 문제를 해결하고 마침내 Ajax 크로스 도메인 문제를 해결하는 두 가지 방법을 찾았습니다.

크로스 도메인 문제인지는 모르겠습니다

이유는 재사용과 반복 개발을 줄이기 위해 별도의 사용자 권한 관리 시스템을 개발하여 다른 사람으로부터 인증 및 권한 정보를 획득하는 것입니다. 잠시 동안 시스템 A를 호출하고 시스템 B를 예로 들어보겠습니다. 시스템 B에서는 ajax를 사용하여 시스템 A의 인터페이스를 호출했습니다. (데이터 형식은 json입니다.) 시스템 A에서 해당 URL에 액세스하면 정상적으로 json 데이터가 반환될 수 있지만 ajax를 사용하여 동일한 요청을 하게 됩니다. 시스템 B의 url은 약간 혼란스럽습니다. 마치 아무 일도 일어나지 않은 것처럼 아이의 반응이 없었습니다. 이런 변경을 오랫동안 반복했는데도 해결이 안되서 동료들에게 도움을 요청하고 Ajax 크로스 도메인 문제일 수도 있다는 점을 상기시켜서 크로스 도메인 문제로 해결했습니다. .

크로스 도메인을 알지만 해결 방법을 모르는 경우

문제의 정확한 원인을 알았으니 문제에 대한 해결책을 찾는 일만 남았습니다. 나는 오랫동안 구글링을 했고 동료의 지도 하에 jQuery의 ajax에 도메인 간 문제를 해결하는 데 사용할 수 있는 jsonp와 같은 속성이 있다는 것을 알게 되었습니다.

솔루션 찾기

이제 우리는 도메인 간 문제를 해결하는 방법을 알았고 나머지는 구현 세부 사항입니다. 구현 과정에서 오류는 불가피합니다. json과 jsonp의 두 가지 형식의 차이점을 이해하지 못했기 때문에 Google에서 이를 해결하는 데 오랜 시간이 걸렸습니다.

먼저 페이지의 크로스 도메인 문제를 해결하기 위해 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);
}});
});

이렇게 작성하면 처음에는 오류 처리 기능이 경고에 불과합니다. ("오류") 오류의 원인을 더 자세히 파악하려면 처리 기능을 위의 구현으로 변경하세요. 경고의 마지막 줄은 다음과 같이 사용됩니다. 궁금해서 계속 구글링을 하다가 마침내 만능 스택오버플로우에서 답을 찾았는데, 링크는 여기입니다. 그 이유는 jsonp의 형식이 json 형식과 약간 다르기 때문에 서버 측의 코드도 약간 다르기 때문입니다.

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에서 콜백이 백그라운드로 전달되는 매개 변수는 Shenma입니다. callback 놀랍습니다. jsonp에는 json보다 callback()이라는 레이어가 하나 더 있습니다. 그래서 당신은 그것을 다루는 방법을 알고 있습니다. 따라서 배경 코드를 수정하십시오.

최종 백그라운드 Java 코드는 다음과 같습니다.

@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;
}

먼저 쿼리 결과를 json 형식으로 변환한 다음 매개변수 콜백을 사용하여 json 외부에 다른 레이어를 추가하여 jsonp가 되도록 해야 합니다. 데이터 유형을 jsonp로 지정하는 Ajax를 추가 처리에 사용할 수 있습니다.

이렇게 하면 도메인 간 문제가 해결되지만 파서 오류의 원인을 검토해 보겠습니다. 그 이유는 json 형식의 데이터를 ajax가 처리할 jsonp 형식의 데이터로 맹목적으로 처리하여 이 오류가 발생하기 때문입니다. 이때 서버 측 코드는 다음과 같습니다.

@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 크로스 도메인을 해결하는 첫 번째 방법입니다. 문제는 끝납니다.

솔루션 추가

추구는 끝이 없습니다. Google에서 검색하는 동안 우연히 도메인 간 문제를 해결하기 위해 특별히 설계된 jQuery 플러그인인 jquery-jsonp를 발견했습니다.

첫 번째 방법을 기반으로 하면 jsonp 플러그인을 사용하는 것이 비교적 간단하며 서버 측 코드는 변경할 필요가 없습니다.

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) 웹 프록시 서버를 통해 서로 다른 도메인의 애플리케이션을 통합합니다. 격리된 경우 모든 애플리케이션은 하나의 도메인 이름 아래에 있습니다. (아파치, nginx 등)

（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。

2.通过