[Spring] 전자정부프레임워크에서 CORS 문제 해결하기

전자정부프레임워크 개발 중 외부 API를 사용하다가

[ Access to XMLHttpRequest at 'A' from origin 'B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ]

CORS Error 덕분에 골머리를 앓았다..ㅎㅎ
외부 api 를 사용할려다보니 CORS 표준에서 벗어나서 생기는 에러이다

구글링으로 찾아본 해결 방법으로는

1 서버단에서 외부url 허용 설정하는 방법
2 미들웨어를 활요하는 방법
3 프록시 서버를 우회하는 방법
4 크롬의 확장프로그램을 활용하는 방법

개발 및 테스트 시에는 4번 방법 확장 프로그램을 사용하는 것이 가장 간단한 방법이었다
내가 설치한 것은 'Muyor'이 제공하는 'Allow CORS: Access-Control-Allow-Origin'

근데 이제... 배포하는 웹의 경우는 사용자들에게 '모두 이 플러그인 설치하세요😀' 할 수는 없으니까

 

---

스프링에서 간단하게 해결할 수 있는 방법이 있었다

✅ 첫번째는 WebConfig에 CORS를 설정해주는 방법!

@Configuration
public class WebConfig implements WebMvcConfigurer {

	@Override
    public void addCorsMappings(CorsRegistry reg) {
    	reg.addMapping("/**").allowedOrigins("URL");
    }
    
}

이렇게 하면 CORS 관련해서 설정할 수 있다
allowedOrigins("URL"); 설정으로 해당 URL에서 오는 요청은 다른 Origin이라도 허용해! 하고 알려주는 것!

 

✅ 두번째 방법은 프록시를 만들어주는 것

@Controller
public class CorsMapper {

	@RequestMapping(value="/proxy.do")
    @ResponseBody
    public String proxy() throws Exception {
    
    	String url = "접근을 허용할 URL";
        RestTemplate restTemplate = new RestTemplate();
        
        return restTemplate.getForObject(url, String.class);
    }
}

RestTemplate을 이용해서 서버에 요청을 보내고 응답을 리턴한다

이 메소드를 프론트단에서

<script type="text/javascript">

	...
    
	var url = "/proxy.do";
	var features = parser.read(vw.GMLParserType.GEOJSON, url, "EPSG:4326");
	
    ...
    
</script>

이런 식으로 불러서 사용하면 해결!

나처럼 서버 셋팅을 손댈 수 있는 상황이 아니라면
위 두가지 방법이 가장 간단한 해결책인듯하다😏