CORS error with Angular call to Java service

I have an Angular application that makes a call to a Spring Boot Java service in a separate container. This gateway service calls two other services (one Java and one Python) as needed. Everything works fine running four Docker containers locally. When I run this in AWS ECS, I get the following two errors in my browser:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=. (Reason: CORS request did not succeed). Status code: (null).

ERROR Object { headers: {…}, status: 0, statusText: “Unknown Error”, url: “http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=”, ok: false, name: “HttpErrorResponse”, message: “Http failure response for http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=: 0 Unknown Error”, error: error } ​ error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … } ​ headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) } ​ message: “Http failure response for http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=: 0 Unknown Error” ​ name: “HttpErrorResponse” ​ ok: false ​ status: 0 ​ statusText: “Unknown Error” ​ url: “http://655b883054184264bf96512da0e137af._http._tcp.gateway-service.local:8084/datasets?page=1&keyword=”

I have a filter in both java services that looks like this:

@Component public class CORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

When running locally, the page loads and I verified that I see the expected CORS header on the gateway service response:

HTTP/1.1 200
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE, PATCH
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Origin,
X-Requested-With, Content-Type, Accept
Content-Type: application/json
Transfer-Encoding: chunked
Date: Sun, 30 Jan 2022 03:37:36 GMT
Keep-Alive: timeout=60
Connection: keep-alive

In case it helps, my Python service also returns a similar CORS header. I’m using the following code to enable CORS in my Python script.

app = Flask(__name__)  CORS(app)

Here is one of the Angular calls to the Gateway service:

let resp = this.http.get(API_GATEWAY + "?page=" + page + "&keyword=" + keyword);

I tried configuring a proxy in Angular, but that didn’t resolve the issue. I also implemented @CrossOrigin(“*”) by each REST Controller in Java to no avail.

Any ideas?

Answer

There are two ways to solve this issue: first you may need to disable cors and csrf inside the config method of the class that extends WebSecurityConfigurerAdapter:

 @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors()
                .and()
                .csrf()
                .disable()
                 .....

second you may leave it enabled then:

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http    
                .cors()
                .and()
                .csrf()
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                ....