jQuery.ajax() 크로스도메인(crossdomain) 허용 설정 in java web application

2017. 9. 18. 13:19모두모두 개발자다요/JAVA

[Client (HTML + javascript(jQuey))]

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
    type : 'GET',
    contentType : 'application/json',
    url : 'http://externalUrl',
    dataType : 'json',
    success : function (res) {
        ...
    },
    error : function (res, status, err) {
        ...
    }
});
</script>

서로 다른 도메인의 request client 와 response server 서버 간의 ajax 통신 할 때(또는 client 쪽의 웹서버 설정 자체가 없는 경우) crossdomain 이슈 때문의 다음과 같은 클라이언트 쪽의 오류가 발생할 수 있다.


XMLHttpRequest cannot load http://externalUrl.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

Origin 'http://clientWebServerUrl (웹서버가 없는 경우 null)' is therefore not allowed access.



크로스도메인 ajax 요청 허용 설정 방법

http://externalUrl 의 response Server 쪽에 다음과 같은 필터 설정으로 크로스도메인 요청 허용 설정이 가능하다.



[Server (java)]

CrossDomainFilter.java ( implements javax.servlet.Filter )

...
...
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");     //허용할 Origin(요청 url) : "*" 의 경우 모두 허용
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, PUT");     //허용할 request http METHOD : POST, GET, DELETE, PUT
    response.setHeader("Access-Control-Max-Age", "3600");     //브라우저 캐시 시간(단위: 초) : "3600" 이면 최소 1시간 안에는 서버로 재요청 되지 않음
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");    //요청 허용 헤더(ajax : X-Requested-With)
    // (cf. 요청 허용 헤더 : "Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization")
    chain.doFilter(req, res);
}
...
...


web.xml

...
...
<filter>
    <filter-name>CrossDomainFilter</filter-name>
    <filter-class>your.java.package.CrossDomainFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CrossDomainFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
...
...