How to work with CORS in Zuul as API gateway + AngularJS + Microservices

Question

I have an application which uses Zuul Netflix as API gateway, the architecture is below:

The architecture is working fine, using the the browser and postman I can access different REST endpoint from the microservices (Service 1, 2 and 3). But when I tried to use it in my front-end web application (AngularJS WebApp) it gives me the following error in chrome console.

XMLHttpRequest cannot load http://localhost:8080/person/api/all. Response for preflight is invalid (redirect)

Using the service through its own address and port will work if I will set @CrossOrigin annotation. But when accessing it through the gateway and no @CrossOrigin annotation on the rest endpoint will not work.

Tried to create below filter in my Security configuration, but still didn't work, instead getting the below error in chrome console.

@Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }

Browser console (Chrome)...

XMLHttpRequest cannot load http://localhost:8080/person/api/all. Redirect from 'http://localhost:80/person/api/all' to 'http://localhost:80' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.

Below is the sample AngularJS HTTP request.

app.controller('loginCtrl', [
    '$scope', '$http', function($scope, $http) {

      $http.get('http://localhost:8080/person/api/all').then(function(data) {
        return console.log(data.data);
      });
]); 

Does anybody know how to deal with it? A lot of tutorials here and there but their webapp is also a spring boot application either siting in api gateway or separate with @EnableZuulProxy annotation which is not what I want.

If anybody can help, thanks in advance.

Answer 1

using similar architecture, faced similar problem, I did following changes and worked for me:

config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
source.registerCorsConfiguration("/**", config);

to

config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("*", config);

and in my angular http request I added header,

{'Access-Control-Allow-Origin':'*'}

worked for me.

I was trying to in the original situation I was only able to access first ever URL mapped in the Zuul route mapping. but after replacing /** with * able to access all mappings without problem, also same goes with Angular side, all the requests should include the header. I am also new to this issue, may be I'll have more information and details later, for now I can say it worked for me, hopefully it'll work for you too.