[CORS] javascript ajax 크로스 도메인 요청 하기

1. 개발환경

ajax + RESTfule

2. 시나리오.

RESTful을 이용해서 서로 다른 domain간에 Json 으로 데이터를 주고 받을 수 있다.

그림 출처 : 시나몬 브레드님의 javascript ajax 크로스 도메인 요청 하기 (CORS)

사실 그림의 1번을 통해 권한을 인증하고, 인증된 권한을 통해 2번 실제 요청을 하는 시나리오를 구성하는게 최종 목적이였습니다.

그런데....

ajax를 통해서 같은 시도를 하면 실패합니다.

XMLHttpRequest cannot load http://localhost:8080/api/employees. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7070' is therefore not allowed access.

데이터도 안가져 오더군요.. ㅡㅡ;;

검색을 해보니 CORS 라는 내용이 유력합니다. ( 시나몬 브레드님의 javascript ajax 크로스 도메인 요청 하기 (CORS) ) - 시나몬 브레드님 깊은 지식에 존경을...

그 관련 자료를 검색하고 확인해서 Filter를 이용하면 해결할 수 있다는 걸 알았습니다.

import java.io.IOException;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.FilterConfig;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.http.HttpServletResponse;

public class SimpleCORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

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

        response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, PUT");

        response.setHeader("Access-Control-Max-Age", "3600");

        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, origin, content-type, accept");

        chain.doFilter(req, res);

    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}

web.xml 추가

    <filter>

        <filter-name>SimpleCORSFilter</filter-name>

        <filter-class>rest.api.filter.SimpleCORSFilter</filter-class>

    </filter>

    <filter-mapping>

        <filter-name>SimpleCORSFilter</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

그리고 ajax 호출 하면 됩니다.

  $.ajax({

      url : "http://localhost:8080/api/employees"

    , async : true

    , type : "POST"

    , cache:false

    , timeout : 30000 

    , data : JSON.parse(JSON.stringify({"id:id, pw:pw"}))

    , dataType : "json"

    , xhrFields: {

            withCredentials: false

      }

    , beforeSend: function (xhr) {

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

      }

    , success : function (data, statusText, xhr) { 

        console.log("success status :: " + xhr.status + " || statusText :: " + statusText);

      }

    , error : function (xhr, statusText, errorThrown) { 

        console.log("error status :: " + xhr.status + " || statusText :: " + xhr.responseText + " || errorThrown :: " + errorThrown);

      }

  });

주의할 점.

async : true ( false 수행이 안됩니다. )

xhrFields: {

            withCredentials: false ( true는 status 값을 0을 리턴합니다. )

}

추가적인 문제는 Web Service를 수행하기 위해 테스트 한 결과입니다만...

SOAP을 이용하기 보다 RESRful을 이용한 Web Service 환경을 구축하고 싶었습니다만..

인증....

이것을 어떻게 풀어야 할 지 문제네요.. ㅋㅋ