Spring과 React 통신 시에 CORS 에러 해결

학원 프로젝트중에 Spring과 React를 같이 쓸려고 하는데 CORS에러가 발생했다.

 

구글링 해 본 결과, SpringBoot와 React를 연결하여 Spring Security로 CORS를 해결하는게 대다수였다.

 

특히 나처럼 국비지원을 하는사람들은 SpringBoot를 안(못?)쓰는 경우가 많을텐데

 

해결방법을 공유하려한다

 

방법을 작성하기전에 한가지 말하고 싶은게 있다면

 

굳이 Spring Security를 쓰려고 시도하지 않아도 된다!

 

에러를 해결하는 방법은 간단할수록 좋은게 아닐까?

 

다른 사람들이 Security로 해결한다고 해서 나까지 똑같이 따라할 필요는 없다.

 

이런 당연한 사실을 간과하고 나는 이틀 내내 Security를 사용하려고 발버둥쳤다....

 

여튼 이제 코드를 써보겠다.

 

Filter를 통해서 response 설정을 해주면 된다.

public class LogFilter implements Filter {

	private Logger logger = LoggerFactory.getLogger(LogFilter.class);

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

	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {

		HttpServletRequest req = (HttpServletRequest) request;

		String remoteAddr = req.getRemoteAddr();
		String uri = req.getRequestURI();
		String url = req.getRequestURL().toString();
		String queryString = req.getQueryString();

		String referer = req.getHeader("referer");
		String agent = req.getHeader("User-Agent");

		StringBuffer sb = new StringBuffer();
		sb.append("\n* remoteAddr : " + remoteAddr) // ip 주소
				.append("\n* uri : " + uri) // http 요청 url 중에 queryString까지 반환 (context path)
				.append("\n* url : " + url) // protocol + servername + portnumber + serverpath
				.append("\n* queryString : " + queryString) // 경로 뒤에 있는 요청 쿼리 문자열 (key=value 형태)
				.append("\n* referer : " + referer) // 이전 페이지의 url (getHeader : 지정한 요청 헤더값을 문자열로 반환)
				.append("\n* agent : " + agent) // 사용자 정보 (browser version, os 등)
				.append("\n");

/************** 바로 이부분을 추가해주면 된다. **********************/
		HttpServletResponse resp = (HttpServletResponse) response;
		// req.getHeader("Origin") -> http://localhost:3000
		
		resp.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
	    resp.setHeader("Access-Control-Allow-Credentials", "true");
		resp.setHeader("Access-Control-Allow-Methods", "GET, POST");
		resp.setHeader("Access-Control-Max-Age", "10");
		resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");
/********************************************************************/
		logger.info("\nLOG Filter" + sb);

		chain.doFilter(req, response);
		// 다음에 존재하는 필터가 있으면, 그 필터가 실행될 수 있도록 chaining!
		// request에 들어있는 정보를 읽어서 log.info한 것!

	}

	@Override
	public void destroy() {

	}

}

위의 코드에서 중요한것은

Access-Control-Allow-Origin인데

지금은 들어오는 요청을 다 허용하려고 req.getHeader("Origin")이라고 작성했지만

주석에 써놓은것처럼 http://localhost:3000 이런식으로 바꿔줘야한다.

주의할 점은 주소 뒤에 /를 붙이면 안된다.

/를 붙이는순간 최상위루트라고 인식을 해버려서 에러를 내는것같다.

 

 

LogFilter를 만들어주고 web.xml에 연결시켜주면 된다.

	// web.xml
    <filter>
		<filter-name>logFilter</filter-name>
		<filter-class>com.kh.swith.common.filter.LogFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>logFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

 

끝!