[http] CORS 오류 발생시 확실히 해결가능한 2가지 방법

개발하다 아래와 같은 CORS 오류가 발생하면 진심 귀찮죠..해결하기 전까진 개발을 이어갈 수도 없고. 

 

Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://www.domain.com:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

확실히 해결하기 위한 방법 2가지를 제시합니다.

(좋은 방법이 추가 확인되는대로 내용은 업데이트 하겠습니다 )

 

첫번째 방법> jquery 플러그인을 이용한 방법 (클라이언트)

STEP1. jquery와 jquery.ajax-cross-origin 라이브러리를 웹 페이지에 추가한다.

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="js/jquery.ajax-cross-origin.min.js"></script>

STEP2. $.ajax 호출 시 crossOrigin 이라는 프로퍼티에 true 를 설정한다.

$.ajax({
      crossOrigin: true,
      url: url,
      success: function(data) {
        $( '#test' ).html(data);
      }
 });

 

 

사용법 및 예제 참조 URL : http://www.ajax-cross-origin.com/

 

 

두번째 방법> 첨부된 CORSFilter.class 파일을 이용해 서버 설정을 간단히 해결하는 방법 (서버)

이 방법은 확실하지만 서버를 직접 설정할 수 있는 환경에서만 가능한 방법입니다.

필터를 적용하는 이유는 url-pattern에 명시한 모든 요청을 대상으로 적용시키기 위함이며 요청헤더에 "Access-Control-Allow-Origin" 값을 "*" 또는 원하는 호스트에 한해 허용처리해 문제를 해결하고자 하는 것입니다.

 

STEP1.  첨부된 CORSFilter.zip 파일을 압축 해제한 후 CORSFilter.class 파일을 개발중인 프로젝트의 클래스 파일위치에 추가합니다.

CORSFilter.zip

0.00MB

<파일 다운로드>

STEP2. 해당 필터가 적용되도록 web.xml을 아래와 같이 수정합니다.
* filter-class에는 해당 파일의 packagename + class이름의 조합으로 구성합니다.

    <filter>
        <filter-name>CORSFilter</filter-name>
        <filter-class>egovframework.com.cmm.filter.CORSFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CORSFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

STEP3. 보안상 요청하는 모든 호스트에 대해 허용하지 않고 특정 호스트에 한해 허용할 경우 수정해줍니다.
CORSFilter.java의 소스는 다음과 같습니다. 필요시 수정후 컴파일해서 사용하세요~

 

참고로 보안상 특정 도메인만 접근을 허용하고 싶을 경우

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

대신에

response.addHeader("Access-Control-Allow-Origin", "https://www.example.com http://www.example.com ... ");

형식으로 나열하면 됩니다.

 

package egovframework.com.cmm.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CORSFilter implements Filter {
	
	@Override
	public void destroy() {}

	@Override
	public void doFilter(ServletRequest request, ServletResponse servletResponse,
			FilterChain chain) throws IOException, ServletException {
		if (!(request instanceof HttpServletRequest)) {
			throw new ServletException("This filter can "
					+ " only process HttpServletRequest requests");
		}

		HttpServletResponse response = (HttpServletResponse) servletResponse;
		response.addHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Headers", "origin, x-requested-with, content-type, accept");
		chain.doFilter(request, response);
	}

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {}
	
	
}