Working on new features for IT Hub Brunswick, I encountered a curious problem. Sending a POST request from the Angular 8 frontend to the Spring MVC backend returned incomplete header information. This article is about how to expose additional headers to the client.

One of the most important features of the IT Hub is the list of events and the list of community groups. Events are organized by a specific group and for both of these, information is provided on the website. For groups, a logo-image can be uploaded. Here’s the call to upload a new logo in the (frontend-) controller:

postNewLogo(Number(newGroup.id), this.currentFileUpload).subscribe((httpResponse) => {
 
  // Force reloading the logo image in the template via call to server with randomized URI. URI of image is the
  // same, however it has to change for Angular to reload it.
  let location = httpResponse.headers.get('Location').toString();
  newGroup._links.image.href = location += '?random+\=' + Math.random();
  this.currentFileUpload = null;
  this.logoUploaderNewGroup.clear();
});
 
postNewLogo(groupId: number, logo: File): Observable<HttpResponse<object>> {
  const formData = new FormData();
  formData.append('groupID', groupId + '');
  formData.append('file', logo);
 
  return this.http.post<HttpResponse<object>>(environment.adminGroupsUrl + '/logo', formData, {
    observe: 'response'
  });
}

What happens here is that in line 16, the Angular HttpClient sends a POST request to the backend. The result of this POST is returned by postNewLogo(). It returns an Observable of HttpResponse (line 11) which is used to extract the location of the saved logo (line 5) by accessing the header, more specific the “Location” in the header.

The first thing to notice here is line 17. Accessing the header is only possible by providing options to the POST-call to tell the HttpClient to observe the whole response. The default setting here is that it will only observe the body of the response. Hence, information from the header is not accessible. This makes perfect sense because most of the time, the body from a response is type-casted into an object that is used in the client, for example to display new values. To get to the header instead of the body requires additional code.

Second, the postNewLogo-method should return the correct type, an Observable of HttpResponse. This is necessary to access the headers of the response in line 5.

This code should have worked without a problem, as many stackoverflow articles promissed. However, it didn’t. Running this code results in an error in line 5 because the header did not contain a key named “Location”. The funny thing is that all of the headers are visible in the debug console in the browser, including “Location”. Angular however could not see those headers.

I found the missing part was not in the frontend, but in the backend. Here’s (part of) the WebConfig that solved the problem:

@Configuration
@EnableWebMvc
@EnableHypermediaSupport(type = EnableHypermediaSupport.HypermediaType.HAL)
public class WebConfig implements WebMvcConfigurer {
 
	// ...
 
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
 
	// ...
 
	final CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(allowedOrigins);
        configuration.setAllowedMethods(List.of("HEAD", "GET", "POST", "PUT", "DELETE", "PATCH"));
        // setAllowCredentials(true) is important, otherwise:
        // The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
        configuration.setAllowCredentials(true);
        // setAllowedHeaders is important! Without it, OPTIONS preflight request
        // will fail with 403 Invalid CORS request
        configuration.setAllowedHeaders(List.of("Authorization", "Cache-Control", "Content-Type"));
        // allow header "Location" to be read by clients to enable them to read the location of an uploaded group logo
        configuration.addExposedHeader("Location");
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
 
    // ...
}

The important line is 23. Here, an additional header “Location” is exposed. Because of security reasons, only six headers are exposed by default: Cache-Control, Content-Language, Content-Type, Expires, Last-Modified and Pragma. To allow the frontend to see the additional, manually added “Location”, it has to be exposed explicitly.

TL;DR

Although all of the headers of a POST-request can be seen in the debug console of the browser, web application frameworks like Angular cannot use them because of security reasons. Those additional headers have to be exposed in the backend. Also, the Angular HttpClient has to be set up to observe the header instead of the body of a POST-call.