어째서 Front에서 Content-Disposition 을 못받는가?

오늘은 개발하면서 이상한 현상이 나와서 이렇게 포스팅을 합니다.

엑셀다운로드를 post로 해서 구현을 하는데 Front에서 Content-Disposition 값을 받지를 못 하는 현상이에요. 

Nginx 설정

server {
    listen       9030;
    listen       [::]:9030;
    #server_name  localhost;

    location / {
        # CORS Accept
        if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,x-api-key,X-Api-Key';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
        }
        if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,x-api-key,X-Api-Key' always;
                add_header 'Access-Control-Expose-Headers' 'Content-Disposition,Content-Length,Content-Range' always;
        }
        if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,x-api-key,X-Api-Key' always;
                add_header 'Access-Control-Expose-Headers' 'Content-Disposition,Content-Length,Content-Range' always;
        }

        proxy_pass http://localhost:9050;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;

    }
        client_max_body_size 100M;

        proxy_buffer_size  128k;
        proxy_buffers      4 256k;
        proxy_busy_buffers_size  256k;

        proxy_redirect off;

}

위의 것으로는 어떤걸 해야하실지 감이 좀 오시나요? 

위의 부분에서 허용할 것을 허용을 해줘야 Front에서 값을 받을수가 있어요. 

Kotlin 에서 해야할 소스 

override fun addCorsMappings(registry: CorsRegistry) {

        if (!springProfile.equals("prd")) {
            registry.addMapping("/**")
                .allowedOrigins(*allowOrigins.toTypedArray())
                .allowedHeaders(*allowHeaders.toTypedArray())
                .allowedMethods(*allowMethods.toTypedArray())
                .exposedHeaders("Content-Disposition,Content-Length,Content-Range")
                .maxAge(8000L)

            allowOrigins.forEach { it ->
                log.debug("[DEBUG] 허용된 오리진 : ${it}")
            }

            allowHeaders.forEach { it ->
                log.debug("[DEBUG] 허용된 헤더 : ${it}")
            }

            allowMethods.forEach { it ->
                log.debug("[DEBUG] 허용된 메서드 : ${it}")
            }


        }
    }

소스에 보시면 exposedHeaders 에 Content-Disposition, Content-Length, Content-Range 를 Header 에 노출시켜라고 이렇세 명시를 해줘야 Front에서 값을 받을 수 있네요. 

오늘도 프로젝트를 하면서 재미있는 것을 하나 찾은 것 같습니다.