어떻게 ajax 크로스 필드 문 제 를 해결 합 니까?

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

  }

});

이로써 두 가지 크로스 오 버 문 제 를 해결 하 는 방식 은 모두 소개 되 었 다.