[Spring] CORS Filter 적용

 

 CORS 에 대해 설명하고자 합니다. Cross-Origin Resource Sharing 의 약자로써, 특정 헤더를 통해 브라우저에게 Origin 에서 실행되고 있는 웹 애플리케이션이 Cross-Origin에 리소스에 접근할 수 있는 권한이 있는지 없는지 확인하는 방침이라고 생각하면 편합니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때  Cross-Origin HTTP 요청을 실행합니다.

 

 CORS 요청 하는 종류  다음과 같습니다.  

• XMLHttpRequest와 Fetch API 호출
• 웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시), 
• WebGL 텍스쳐.
• drawImage() (en-US)를 사용해 캔버스에 그린 이미지/비디오 프레임.
• 이미지로부터 추출하는 CSS Shapes.

 

 CORS 에 관한 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 를 참고해주세요.

 스프링에서는 필터를 적용하여 CORS를 JSONP 로 우회하는 방법에 대해 알아보도록 하겠습니다.

 

 

# Contents

---

• CORS Filter 적용

 

 

# CORS Filter 적용

---

1. CORSFilter.java 생성

먼저 자바코드를 추가할 예정입니다. 저는 추가할 자바코드의 패키지 명을 com.mycom.myapp.filter 로 하겠습니다.

그리고 자바 파일명을 CORSFilter.java로 만들었습니다. 그리고 아래 코드를 추가하겠습니다.

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 CORSFilter 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() {}
}

 

* Request headers (클라이언트의 요청 헤더)
    - Origin: 요청을 보내는 페이지의 도메인
    - Access-Control-Request-Method: 실제 요청하려는 메소드 종류
    - Access-Control-Request-Headers: 실제 요청에 포함되어 있는 헤더 이름

* Response headers (서버에서의 응답 헤더)
    - Access-Control-Allow-Origin: 요청을 허용하는 출처. * 인 경우, 모든 도메인의 요청을 허용한다.
    - Access-Control-Allow-Methods: 요청을 허용하는 메소드 종류. 헤더 값에 해당하는 메소드만 접근 허용한다. (default : GET, POST)
    - Access-Control-Allow-Headers: 요청을 허용하는 헤더 이름
    - Access-Control-Max-Age: 클라이언트에서 preflight 의 요청 결과를 저장할 시간(sec). 해당 시간동안은 preflight요청을 다시 하지 않게 된다.

출처: https://codediver.tistory.com/135 [코드 다이버]

 

2. Web.xml 수정

 web.xml 로 이동 합니다.

 web.xml의 경로는 "My Project\src\main\webapp\WEB-INF\web.xml" 이며 아래는 이클립스로 접근한 사진입니다.

 

 

 

xml파일을 열어서 아래 코드를 넣어주세요. 

<!--  CORSFilter 설정 -->
<filter>
	<filter-name>CORSFilter</filter-name>
	<filter-class>com.sejong.cdbiz.util.CORSFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>CORSFilter</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

 

서버를 다시 시작해주면 CORS 필터 적용이 완료됩니다.