Angular4 CORS header contains multiple values - spring

Question

please could somebody help to resolve issue:
backend spring application
web.xml
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>package.controllers.auth.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
filter
public class CorsFilter implements Filter {
#Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin", "*,*");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Access-Control-Allow-Origin");
httpResponse.setHeader("Access-Control-Expose-Headers", "Access-Control-Allow-Credentials");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Max-Age", "10");
System.out.println("---CORS Configuration Completed---");
chain.doFilter(request, response);
}
Angular frontend:
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(AppSettings.API_ENDPOINT + '/url', JSON.stringify(user), options)
.map(response => response.json())
}
Browser return issue:
Response to preflight request doesn't pass access control check: The
'Access-Control-Allow-Origin' header contains multiple values

Answer 1

I was also facing same issue. Root cause was that cors header was going multiple times. I commented out
httpResponse.setHeader("Access-Control-Allow-Origin", "*");"
line.
I had only one security config class which looks like below. This class, solved my issue of cors.
#Configuration
#EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
#Override
protected void configure(HttpSecurity http) throws Exception {
http
// your security config here
.authorizeRequests()
.antMatchers(HttpMethod.TRACE, "/**").denyAll()
.antMatchers("/admin/**").authenticated()
.anyRequest().permitAll()
.and().httpBasic()
.and().headers().frameOptions().disable()
.and().csrf().disable()
.headers()
// the headers you want here. This solved all my CORS problems!
/* .addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Origin", "*"))*/
.addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Methods", "POST, GET"))
.addHeaderWriter(new StaticHeadersWriter("Access-Control-Max-Age", "3600"))
.addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Credentials", "true"))
.addHeaderWriter(new StaticHeadersWriter("Access-Control-Allow-Headers", "Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization"));
}
}
In my case, i am just doing POC, and calling Rest resource from angular application. I was facing only issue in CORS .
To solve only cors issue, bare minimum below code is also sufficient.
#Configuration
#EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
#Override
protected void configure(HttpSecurity http) throws Exception {
}
}