CORS (Cross-origin resource sharing) 사이트간 데이터 주고 받기

@ 주제 

CORS (Cross-origin resource sharing)   사이트간  데이터 주고 받기

 

@ 목적 

URL 이 다른 사이트간 데이터 전송 작업을 위함 

 

@ 내용 

CORS (Cross-origin resource sharing) : 서로 다른 도메인에서 리소스를 공유하는 방식? 이라 볼 수 있다 . 

기존에 있는 Same-Origin Policy ( 동일 출처 정책)와 반대 되는 개념으로 보면된다. 

 

• 자바스크립트가 할 수 없는 것들 참고하기 

 

 

예를 들어, www.example.com 이라는 사이트에서 사용하는 api가 있다. 해당 api는 외부에 공개하려는 목적이 아닌, 자신들의 사이트에서 사용하기 위해 만들었다고 치자. 그런데 이 api를 다른 사이트에서 알게 되었고 허락없이 무단으로 가져다 사용하게 된다면 이 사이트 입장에서는 상당히 곤란할 것이다. 그래서 나온 것이 Same-origin policy 정책이다. 프로토컬, 도메인, 포트가 모두 같을시 동일 출처 정책을 따른다고 볼 수 있다. 

 

보통 api를 사용할 때, ajax를 사용하는데 이 same-origin policy를 따르지 않을 경우, 오류가 나면서 api 사용이 거절된다. 

 

이걸 해결할 수 있는 방법 중 하나는 JSONP 방식이 있다. 

 js, css 등의 파일은 same-origin policy를 따르지 않아도 되기 때문에 서버에서 값을 돌려줄때 마치 js 파일처럼 값을 돌려주고, 클라이언트에서는 이 값을 콜백 함수로 재처리 하여 사용하는 방식이다.

 

JSONP 방식은 서버단에서 리턴해 줄 때 콜백함수이름으로 감싸서 보내주어야 한다.

예) CALLBACK NAME : myCall인 경우 myCall([{name:"철수"}])  

 

 

스프링에서도 이를 해결할 수 있는 방법이 있는데 

샘플 시작~~ 

 

-- jsp 

var json2 = {myCode: 1212056, rvFlag: 1, vnr:"A0001"};

                

                $.ajax({

                      url: "http://10.10.10.10:8518/api/if/test_aaa",

                      data: JSON.stringify(json),

                      type: "POST",          

                      beforeSend: function(xhr) {

                          xhr.setRequestHeader("Accept", "application/json");

                          xhr.setRequestHeader("Content-Type", "application/json");

                      },

                      success: function(data){

                          console.log(data);

                      }

                });



-- Controller 









// @CrossOrigin(origins = "http://domain1.com, http://domain2.com") 이런식으로 허용하고 싶은 도메인만 설정도 가능하다. 

@CrossOrigin //  @CrossOrigin 어노테이션을 붙여주면 기본적으로 '모든 도메인, 모든 요청방식' 에 대해 허용 한다는 뜻이다.

@Controller

@RequestMapping("/api/if")

public class InterfaceResource {

    

    @Autowired HttpServletRequest request;

    @Autowired HttpServletResponse response;

    @Autowired InterfaceService interfaceService;

    

    

    



    @ResponseBody

    @CrossOrigin

    @RequestMapping(method = {RequestMethod.GET, RequestMethod.POST },  headers = "Accept=application/json", value="/status")

    public ResponseEntity<?> a_status(@RequestBody Test test){

        

        Map<String, Object> res = new HashMap<>();

        res.put("RESPONSE", interfaceService.a_status(test));    

        return new ResponseEntity<>(res, HttpStatus.OK);

    }

    

    



    

    @ResponseBody

    @CrossOrigin

    @RequestMapping(method = { RequestMethod.GET, RequestMethod.POST }, headers = "Accept=application/json", value="/aprv")

    public ResponseEntity<?> apon_pms_aprv(@RequestBody Test test){

        Map<String, Object> res = new HashMap<>();

    

        res.put("RESPONSE", interfaceService.aprv(test));

        return new ResponseEntity<>(res, HttpStatus.OK);

    }

    



    //해더에 넣을거면

    /*HttpHeaders headers = new HttpHeaders();

    headers.set("Content-type", "application/javascript;charset=UTF-8");

    headers.add("RTN_TYPE", res.get("RTN_TYPE"));   

    headers.add("RTN_MSG", res.get("RTN_MSG"));*/  



}

--- service 

public Map<String, Map<String, String>> b_status(Test test) {

        Map<String, Map<String, String>> response = new HashMap<String, Map<String, String>>();

        Map<String, String> output = new HashMap<String, String>();

        Map<String, String> header = new HashMap<String, String>();

        

        System.out.println(test.getMyCode());



        String projectNo = test.getMyCode();

        if( StringUtils.isEmpty(projectNo) ) {

            this.setMyHeader("E", "MYCODE IS EMPTY", header);

            response.put("HEADER", header);

            return response;

        }

        

        // GET PMS INFOMATION

        Project p = projectRepository.getProjectByProjectNo(projectNo);

        if(p.getProjectId() != null ) {

            

            output.put("NAME", p.getProjectTitle());  

            output.put("CREATOR", p.getCreatedBy() != null ? p.getCreatedBy().getName() : "-");    

            output.put("STATUS", p.getAponStatus() != null ? String.valueOf(p.getAponStatus()) : "");

            this.setMyHeader("S", "OK", header);

            

        } else {

            this.setMyHeader("E", "COULD NOT FIND MATCHING PROJECT", header);

            response.put("HEADER", header);

            return response;

        }

        

        

        response.put("HEADER", header);

        response.put("OUTPUT", output);

        

        return response;

    }





-- VO 

package kr.co.bpnr.amorepms.service.dto;



import lombok.Data;

@Data   // 롬복에서는 @Data 어노테이션을 적어주면 getter setter 전부 처리해주기 때문에 새로 만들 필요가 없다. 

public class TEST {

    //*  MYCODE    : project_no

    //*  APRVFLAG: 결재상태

    //*  APVNR    : 결재문서 Doc ID

    

    private String myCode;        

    private String rvFlag;        

    private String pvnr;



    

}