티스토리 뷰

Front End와 Back End으로 나눠 인프라를 구성할 때, CORS를 종종 만나게 됩니다. CORS는 Cross-Origin Resource Sharing Policy의 약자로 브라우저에서 다른 출처의 리소스를 공유하는 정책입니다. 서로 다른 도메인에서 API를 호출할 때 발생하는 에러로 이를 해결하기 위해 CORS를 설정해주어야 합니다.


CORS 는 OPTIONS 요청을 통해서 서버가 적절한 Access-Control를 가졌는지 확인하고 적절하지 않다면 CORS 에러를 발생시킵니다. 해당 에러를 해결하는 방법에 대해 작성하였습니다.


방법1. Filter 사용

@Configuration
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException{
		Filter.super.init(filterConfig);
	}

	@Override
	public void doFilter() throws IOException, ServletException{
		HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse request = (HttpServletResponse) res;
        
		response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
		response.setHeader("Access-Control-Allow-Credentials", "true");
		response.setHeader("Access-Control-Allow-Methods", "*");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Authorization");

		if("OPTIONS".equalsIgnoreCase(request.getMethod())){
			response.setStatus(HttpServletResponse.SC_OK);
		} else {
			chain.doFilter(req, res);
		}
	}
	
	@Override
	public void destroy(){ 
		Filter.super.destroy(); 
	}
}



방법2. 컨트롤러 어노테이션 추가

@CrossOrigin(origins = "*", allowedHeaders = "*")



감사합니다.

최근에 올라온 글
Total
Today
Yesterday