[WEB] CORS?

웹 개발자들은 아는 악명 높은 CORS... 

이론적인 것은 이미 포스팅이 많이 되어 있으니 내가 실제 겪은 상황과 해결 방법에 대해 적어보려고 한다.

 

(사실 해결 방법이라기 보단 우회? 방법이다...ㅠ)

---

나의 상황은 이러했다.

 

회사에서 개발용으로 열려있는 host IP의 dev라는 도메인이 있다고 치자. (ex. 123 IP의 example 도메인)

그 안에서 전에 만들어둔 파일 관리 테스트용 페이지가 있는데 이 html, css, js코드만 가져왔다.

 

이 페이지는 로직이 php로 이루어져 있기 때문에 자바 로직 URL 리소스로 바꿔주기 위해 따로 빼온 것이다.

(복사한 클라이언트 코드도 123 IP의 example 도메인 서버 안에서 실행되는 중이다.)

 

따라서 기존에는 JS코드에 var server_url 이라는 변수에 example 이라는 도메인을 갖고 있었다면, 지금은 로컬호스트 환경에서 개발 중인 자바 코드 URL로 바꿔주기 위해 server_url에 upload.service.kr:8080/file/upload 이런 식으로 변경했다.

(upload.service.kr은 hosts파일에서 127.0.0.1 upload.service.kr 로 적어서 매핑해 준 것이다.)

 

이 상태로 업로드 버튼 이벤트를 발생시키면 당연히 CORS에러가 발생한다. (프로토콜만 같고 도메인과 포트는 아예 다르기 때문)

여기까진 당연히 발생하는 것이기에 스트레스가 없었다.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://example", "http://localhost:8080")
//                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
        System.out.println("CORS 설정이 적용되었습니다.");
    }
}

보통 이렇게 CORS 설정을 해주면 해결이 된다. Configuration 어노테이션을 통해 전역적인 설정을 해주는 것이다.

물론 실제 서비스할 땐 컨트롤러 별로 혹은 매핑되는 메소드 별로 걸어주는 것이 더 안전하겠지만 일단 테스트용으로....

 

하지만 설정을 해줬음에도 CORS에러는 사라지지 않았다.

upload.html:1 Access to XMLHttpRequest at 'http://upload.workservice.kr:8080/file/upload' from origin 'http://example' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

 

구글링을 통해 정말 별의 별 방법을 다 사용해 보았는데도 해결이 되지 않았다.

 

결국 우회하는 방법을 택했다.

 

C:\Program Files\Google\Chrome\Application

보통은 이 경로에 chrome.exe가 들어있을 것이다. 

이때 크롬의 security를 비활성화하여 실행시키는 명령어로 실행을 시킨다.

 

chrome.exe --disable-web-security --user-data-dir=C:\Temp

이렇게 하고 해당 페이지에 들어가 작동을 시키면 CORS에러 없이 잘 해결된다.