CORS 부터 Mixed Content 까지 문제 해결

CORS 문제

Access to XMLHttpRequest at 'http://localhost:8080/example' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

리액트에서 API 서버로 요청을 보냈더니 위와 같은 메세지를 받았다.

보안상 서로 다른 도메인이 서버 자원에 접근하려 하는 경우 이를 막는 것이다. CORS 설정을 통해 이 문제를 해결할 수 있다.

 

@Configuration
class WebConfig {
    @Bean
    fun corsConfigurer(): WebMvcConfigurer {
        val serverIp: String = when (System.getProperty("spring.profiles.active")) {
            "prod" -> "https://api.seogineer.com"
            else -> "http://localhost:3000"
        }

        return object : WebMvcConfigurer {
            override fun addCorsMappings(registry: CorsRegistry) {
                registry.addMapping("/**")
                    .allowedOrigins(serverIp)
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    .allowedHeaders("*")
                    .allowCredentials(true)
            }
        }
    }
}

 

Mixed Content 문제

App.js:73 Mixed Content: The page at 'https://react.test.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.seogineer.com/example'. This request has been blocked; the content must be served over HTTPS. Zt.children.children.onClick @ App.js:73

 

CORS 문제를 해결했더니 Mixed Content 문제가 발생했다.

 

HTTPS로 로드된 리액트(https://react.test.com/)에서 HTTP로 API 서버(http://api.seogineer.com/example)에 요청을 보냈기 때문에 발생한 문제였다.

 

API 서버에 SSL 인증서로 HTTPS 설정을 해야 한다.

 

SSL 인증서를 얻는 방법은 두 가지가 있다.

• Let’s Encrypt와 같은 곳에서 인증서를 얻는 방법
• 자체 서명된 인증서를 얻는 방법

API 서버는 도메인이 없었기 때문에 "자체 서명된 인증서"를 사용했다.

 

 

터미널에서 프로젝트의 resources 디렉토리로 이동한다.

src/main/resources

 

keytool을 사용하여 자체 서명된 인증서를 생성한다.

keytool -genkeypair -v -keystore mykeystore.jks -keyalg RSA -keysize 2048 -validity 365 -alias selfsigned

 

• -keystore mykeystore.jks: 생성할 키스토어의 이름입니다. (예: mykeystore.jks)
• -keyalg RSA: 키 알고리즘을 RSA로 설정합니다.
• -keysize 2048: 키의 크기를 2048비트로 설정합니다.
• -validity 365: 인증서 유효 기간을 365일로 설정합니다.
• -alias selfsigned: 생성되는 키의 별칭을 지정합니다.

위 명령어를 실행하면 비밀번호, 이름, 소속, 주소, 우편번호 등을 입력하게 된다.

 

gradle로 빌드하면 build/resources/main/mykeystore.jks 인증서가 위치한 것을 확인할 수 있다.

#application-prod.properties
server.port=443
server.ssl.key-store=classpath:mykeystore.jks #build/resources/main/mykeystore.jks와 동일
server.ssl.key-store-password=seogineer	#인증서를 생성할 때 입력한 비밀번호
server.ssl.key-store-type=JKS
server.ssl.key-alias=selfsigned