클라이언트에서 Location header를 찾지 못할 때

CORS 응답 설정시에 서버측에서 자주하는 실수가 있습니다.

 

아래 코드로 CORS 응답을 설정해줄 수 있습니다.

하지만 한가지 문제가 발생합니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public static final String ALLOWED_METHOD_NAMES = "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH";

    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedMethods(ALLOWED_METHOD_NAMES.split(",")));
    }
}

클라이언트의 네트워크 탭에서는 Location header가 return되는 것이 확인이 됩니다.

하지만 JavaScript에서는 Location header를 찾지 못합니다.

 

그래서 서버에서 201 created 와 함께 Location header에 createdId를 지정해 보내주어도 클라이언트에서는 읽을 수 없습니다.

 

 

왜 발생?

CORS 응답을 활성화해주는 과정에서 기본적으로 사용 가능한 헤더 중 일부만 노출시킵니다.

더 많은 헤더를 원할 경우 노출시키고 싶은 헤더를 지정해주어야 합니다.

 

 

CORS-safelisted response header

CORS-safelisted 응답 헤더는 클라이언트 스크립트에 노출해도 안전하다고 간주되는 CORS 응답의 HTTP 헤더입니다.

클라이언트의 브라우저는 safelist에 있는 응답 헤더만 사용할 수 있습니다.

 

safelist

• Cache-Control
• Content-Language
• Content-Length
• Content-Type
• Expires
• Last-Modified
• Pragma

 

 

 

해결방법

exposedHeaders에 Location header를 지정해줍니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public static final String ALLOWED_METHOD_NAMES = "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH";

    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedMethods(ALLOWED_METHOD_NAMES.split(","))
            .exposedHeaders(HttpHeaders.LOCATION); // exposed header 지정
    }
}

 

 

 

 

참고

• https://www.aaron-powell.com/posts/2013-11-28-accessing-location-header-in-cors-response/
• https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_response_header