CORS(Cross-Origin Resource Sharing, 교차 출저 리소스 공유)

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS)

 

Same-Origin Policy(동일 출저 정책): 요청을 보내는 쪽과 받는 쪽의 출저가 같아야 접근이 가능한 정책

-http, https 동일

-도메인 동일

-포트 동일

 

프로젝트에서 React와 Spring Boot를 연동해야 했기에, 개발 단계에서 포트 번호가 달라 위의 정책을 따르지 못하는 상황이 발생하였음

 

그래서 이를 해결하기 위해, CORS를 사용해 서로 다른 출저에서의 요청도 접근이 가능하도록 해줘야 했음.

Access-Control-Allow-Origin 헤더를 사용해 사용하며, axios 요청 시 헤더에 붙여 보낼 수도 있지만, 스프링부트 쪽의 컨트롤러 파일을 사용하여 설정하기로함.

 

package com.todaydsr.api.config;

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;


import org.springframework.context.annotation.Configuration;

@Configuration
public class CORSFilter implements Filter {
	@Override
	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
			throws IOException, ServletException {
		// TODO Auto-generated method stub
		System.out.println("request:"+req+",response:"+res);
		System.out.println("필터링이 진행 중 입니다.");
		HttpServletResponse response = (HttpServletResponse)res;
		
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Credentials", "true");
		response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,OPTIONS,DELETE");
		response.setHeader("Access-Control-Allow-Credentials", "true");
		response.setHeader("Access-Control-Allow-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, "
                + "Authorization, Origin, Accept, Access-Control-Request-Method, Access-Control-Request-Headers");
        
        chain.doFilter(req, res);
	}
	public void init(FilterConfig filterConfig) {}
	
	public void destroy() {}

}

 스프링 4.2 이상부터는 @CrossOrigin 어노테이션을 이용하여 쉽게 대체 가능하다고 함