크로스 도메인 문제 해결에 CORS 이용하기

참조

jsonp 로 크로스 도메인 문제를 해결할 수도 있지만, 편법의 느낌이 좀 나고 또 GET 메소드만 호출 가능하다는 단점이 있습니다.

클라이언트 코드

클라이언트는 crossDomain: true 를 추가하는 것으로 코드수정이 끝납니다.

const json = {
    'userLoginId': $('#id').val(),
    'userLoginPassword': $('#password').val()
};
const data = JSON.stringify(json);

$.ajax({
    url: url,
    type: 'POST',
    crossDomain: true,
    contentType : 'application/json; charset=UTF-8',
    data: data,
    dataType: 'json',
    success: function(data) {
        alert(data);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

서버 코드

서버에서는 아래 내용을 헤더에 추가하는 것으로 작업이 끝납니다.
(대소문자를 구분합니다.)

Access-Control-Allow-Origin : *

크로스 도메인 호출이 필수로 판정되어, 아예 규약에 추가해 버린 것입니다.

아래 코드는 모든 API 호출에 대해,
Access-Control-Allow-Origin : * 를 추가해 줍니다.

@WebFilter("/*")
public class AddResponseHeaderFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;

        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "*");

        chain.doFilter(request, response);
    }
}

@ServletComponentScan
@SpringBootApplication
public class WarehouseApplication {

  public static void main(String[] args) {
    SpringApplication.run(WarehouseApplication.class, args);
  }

}