[JavaScript/Ajax] 크로스 도메인 No 'Access-Control-Allow-Origin' header is present on the requested resource.

아마 Ajax를 사용하여 서버와 Data를 json방식으로 송/수신을 하다 보면

이런 문구를 보신 적이 있는 분들이 많을텐데요

 

Failed to load http://192.168.10.71:8098/dbTest/dbtest3: 

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.10.71:8099' is therefore not allowed access.

다른 도메인에서 파일을 요청하면 도메인 간 정책으로 인해 문제가 발생할 수 있습니다만, 도메인 간 데이터 통신으로부터 다이나믹한 웹 구현을 위한 방법으로 JSONP가 나오게 되었습니다.

 

여기서는 jQuery의 ajax를 이용한 JSONP 요청 방법을 설명드리겠습니다.

JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있고

JSON 콜백은 url?callback=? 구문을 사용하여 지정할 수 있습니다.

 

---

Server

@SuppressWarnings("unchecked")
@RequestMapping(value = "/dbtest3", produces = "application/json;charset=utf-8")
public void dbtest3(HttpServletRequest request, HttpServletResponse response) throws Exception {
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
 
    String return_callback = request.getParameter("callback");
    String u_id = request.getParameter("u_id");
    JSONObject obj = new JSONObject();
    try {
        HsvUser hu = hsvUserService.getUserInfo(u_id);
        if (hu != null) {
            obj.put("u_id", hu.getU_id());
            obj.put("company_id", hu.getCompany_id());
            obj.put("u_name", hu.getCompany_id());
        }
 
        String strResult = "";
        strResult = obj.toJSONString();
        PrintWriter os = response.getWriter();
        os.write(return_callback + "(" + strResult + ")");
        System.out.println(return_callback + "(" + strResult + ")");
        os.flush();
        os.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Client

function getDBUserInfo(u_id) {
    var result = "";
    var urlt = "http://192.168.10.71:8098/dbTest/dbtest3";
    $.ajax({
        type: "GET",
        dataType: 'jsonp',
        data: {
            'u_id': u_id
        },
        url: urlt,
        contentType: 'javascript/jsonp; charset=utf-8',
        jsonpCallback: u_id,
        jsonp: 'callback',
        async: false,
        success: function(data) {
            result = data;
            console.log(result);
        },
        error: function(e) {
            console.log(e);
        }
    });
    return result;
}

Server Result

test({"company_id":"JSH_STORY","u_id":"test","u_name":"JSH_STORY"}) 

Client Result

결과를 보시면 서버에서도 값을 잘 넘겨주고 자바스크립트에서도 값을 제대로 받고 있습니다.

테스트 해보시고 궁금한 사항 있으시면 언제든지 댓글로 남겨주세요

(Chrome 62.0  / Explorer 11 / Safari 5.1.7 에서 테스트했습니다)